Skip to main content
本文に 67 文字追加
ソース リンク

venobox という jQuery用のライブラリを使用してモーダルウィンドウで外部 HTML (同サイト内)をアイフレームで読み込む WEB サイトを制作しています。

モーダルウィンドウを開いた際、背景の右上に × の閉じるボタンが表示されますが、これをモーダルウィンドウ内(枠内右上)に表示する方法と、読み込まれたHTML内に閉じるボタンを設置する方法を教えていただけませんでしょうか。

【追記】
少し質問内容がおかしかったので追記させていただきます。
アイフレームで読み込まれる側に閉じるボタンが設置できれば
閉じるボタンが枠内に表示されることになるので、私の質問はひとつでした。
何卒ご教授の程よろしくお願いいたします。

私の試した方法は下記下記を読み込まれる側のHTMLに設置しただけではタメでした。

<div class="vbox-close">X</div>

Fancyboxで閉じるボタンを設置する場合などを参考に
読み込む側(親)を操作する必要があるようなので読み込まれる側(子)のHTMLにjQueryを読み込んだ上で下記のようにして

<script type="text/javascript">
$('.vbox-close').click(function(){
    parent.$.○○○○○.close();
});</script>

parent以降の部分をvonoboxやcloseVboxなど色々変更してみたのですがダメでした。

venobox という jQuery用のライブラリを使用してモーダルウィンドウで外部 HTML (同サイト内)をアイフレームで読み込む WEB サイトを制作しています。

モーダルウィンドウを開いた際、背景の右上に × の閉じるボタンが表示されますが、これをモーダルウィンドウ内(枠内右上)に表示する方法と、読み込まれたHTML内に閉じるボタンを設置する方法を教えていただけませんでしょうか。

【追記】
少し質問内容がおかしかったので追記させていただきます。
アイフレームで読み込まれる側に閉じるボタンが設置できれば
閉じるボタンが枠内に表示されることになるので、私の質問はひとつでした。
何卒ご教授の程よろしくお願いいたします。

私の試した方法は下記を読み込まれる側のHTMLに設置

<div class="vbox-close">X</div>

Fancyboxで閉じるボタンを設置する場合などを参考に

<script type="text/javascript">
$('.vbox-close').click(function(){
    parent.$.○○○○○.close();
});</script>

parent以降の部分をvonoboxやcloseVboxなど色々変更してみたのですがダメでした。

venobox という jQuery用のライブラリを使用してモーダルウィンドウで外部 HTML (同サイト内)をアイフレームで読み込む WEB サイトを制作しています。

モーダルウィンドウを開いた際、背景の右上に × の閉じるボタンが表示されますが、これをモーダルウィンドウ内(枠内右上)に表示する方法と、読み込まれたHTML内に閉じるボタンを設置する方法を教えていただけませんでしょうか。

【追記】
少し質問内容がおかしかったので追記させていただきます。
アイフレームで読み込まれる側に閉じるボタンが設置できれば
閉じるボタンが枠内に表示されることになるので、私の質問はひとつでした。
何卒ご教授の程よろしくお願いいたします。

下記を読み込まれる側のHTMLに設置しただけではタメでした。

<div class="vbox-close">X</div>

Fancyboxで閉じるボタンを設置する場合などを参考に
読み込む側(親)を操作する必要があるようなので読み込まれる側(子)のHTMLにjQueryを読み込んだ上で下記のようにして

<script type="text/javascript">
$('.vbox-close').click(function(){
    parent.$.○○○○○.close();
});</script>

parent以降の部分をvonoboxやcloseVboxなど色々変更してみたのですがダメでした。

本文から 20055 文字削除
ソース リンク

私の試した方法は下記を読み込まれる側のHTMLに設置

(function($){

var ios, ie9, overlayColor, overlay, framewidth, border, bgcolor, frameheight, margine, sonH, finH, numeratio,
    vwrap, container, infinigall, content, core, dest, top, prima, type, thisgall, items, thenext, theprev,
    title, nextok, prevok, keyNavigationDisabled, blocktitle, blocknum, evitanext, evitaprev, evitacontent,
    figliall, extraCss;

$.fn.extend({
    //plugin name - venobox
    venobox: function(options) {

      // default option
      var defaults = {
          framewidth: '',
          frameheight: '',
          border: '0',
          bgcolor: '#fff',
          titleattr: 'title', // specific attribute to get a title (e.g. [data-title]) - thanx @mendezcode
          numeratio: false,
          infinigall: false,
          overlayclose: true // disable overlay click-close - thanx @martybalandis 
      };

      var option = $.extend(defaults, options);

        return this.each(function() {
              var obj = $(this);

              // Prevent double initialization - thanx @matthistuff
              if(obj.data('venobox')) {
                return true;
              }

              obj.addClass('vbox-item');
              obj.data('framewidth', option.framewidth);
              obj.data('margin-top', option.margint);
              obj.data('frameheight', option.frameheight);
              obj.data('border', option.border);
              obj.data('bgcolor', option.bgcolor);
              obj.data('numeratio', option.numeratio);
              obj.data('infinigall', option.infinigall);
              obj.data('overlayclose', option.overlayclose);
              obj.data('venobox', true);

              ios = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);

              // IE 9 or less
              ie9 = ((document.all && !window.atob) ? true : false);

              obj.click(function(e){
                e.stopPropagation();
                e.preventDefault();
                obj = $(this);
                overlayColor = obj.data('overlay');
                framewidth = obj.data('framewidth');
                frameheight = obj.data('frameheight');
                border = obj.data('border');
                bgcolor = obj.data('bgcolor');
                nextok = false;
                prevok = false;
                keyNavigationDisabled = false;
                dest = obj.attr('href');
                top = $(window).scrollTop();
                top = -top;
                extraCss = obj.data( 'css' ) || "";

                $('body').wrapInner('<div class="vwrap"></div>');

                vwrap = $('.vwrap');
                core = '<div class="vbox-overlay ' + extraCss + '" style="background:'+ overlayColor +'"><div class="vbox-preloader">Loading...</div><div class="vbox-container"><div class="vbox-close">X</div><div class="vbox-content"></div></div><div class="vbox-title"></div><div class="vbox-next">next</div><div class="vbox-prev">prev</div></div>';

                $('body').append(core);

                overlay = $('.vbox-overlay');
                container = $('.vbox-container');
                content = $('.vbox-content');
                blocknum = $('.vbox-num');
                blocktitle = $('.vbox-title');

                content.html('');
                content.css('opacity', '0');

                checknav();

                overlay.css('min-height', $(window).outerHeight());

                if (ie9) {
                  overlay.animate({opacity:1}, 250, function(){
                    overlay.css({
                      'min-height': $(window).outerHeight(),
                      height : 'auto'
                    });
                    if(obj.data('type') == 'iframe'){
                      loadIframe();
                    }else if (obj.data('type') == 'inline'){
                      loadInline();
                    }else if (obj.data('type') == 'ajax'){
                      loadAjax();
                    }else if (obj.data('type') == 'vimeo'){
                      loadVimeo();
                    }else if (obj.data('type') == 'youtube'){
                      loadYoutube();
                    } else {
                      content.html('<img src="'+dest+'">');
                      preloadFirst();
                    }
                  });
                } else {
                  overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

                    // Check if transition is on the overlay - thanx @kanduvisla
                    if( e.target != e.currentTarget ) {
                      return;
                    }
                    
                    overlay.css({
                      'min-height': $(window).outerHeight(),
                      height : 'auto'
                    });
                    if(obj.data('type') == 'iframe'){
                      loadIframe();
                    }else if (obj.data('type') == 'inline'){
                      loadInline();
                    }else if (obj.data('type') == 'ajax'){
                      loadAjax();
                    }else if (obj.data('type') == 'vimeo'){
                      loadVimeo();
                    }else if (obj.data('type') == 'youtube'){
                      loadYoutube();
                    } else {
                      content.html('<img src="'+dest+'">');
                      preloadFirst();
                    }
                  });
                  overlay.css('opacity', '1');
                }

                if (ios) {
                  vwrap.css({
                    'position': 'fixed',
                    'top': top,
                    'opacity': '0'
                  }).data('top', top);
                } else {
                  vwrap.css({
                    'position': 'fixed',
                    'top': top
                  }).data('top', top);
                  $(window).scrollTop(0);
                }

                /* -------- CHECK NEXT / PREV -------- */
                function checknav(){

                  thisgall = obj.data('gall');
                  numeratio = obj.data('numeratio');
                  infinigall = obj.data('infinigall');

                  items = $('.vbox-item[data-gall="' + thisgall + '"]');

                  if(items.length > 0 && numeratio === true){
                    blocknum.html(items.index(obj)+1 + ' / ' + items.length);
                    blocknum.fadeIn();
                  }else{
                    blocknum.fadeOut();
                  }

                  thenext = items.eq( items.index(obj) + 1 );
                  theprev = items.eq( items.index(obj) - 1 );

                  if(obj.attr(option.titleattr)){
                    title = obj.attr(option.titleattr);
                    blocktitle.fadeIn();
                  }else{
                    title = '';
                    blocktitle.fadeOut();
                  }

                  if (items.length > 0 && infinigall === true) {

                    nextok = true;
                    prevok = true;

                    if(thenext.length < 1 ){
                      thenext = items.eq(0);
                    }
                    if(items.index(obj) < 1 ){
                      theprev = items.eq( items.index(items.length) );
                    }

                  } else {

                    if(thenext.length > 0 ){
                      $('.vbox-next').css('display', 'block');
                      nextok = true;
                    }else{
                      $('.vbox-next').css('display', 'none');
                      nextok = false;
                    }
                    if(items.index(obj) > 0 ){
                      $('.vbox-prev').css('display', 'block');
                      prevok = true;
                    }else{
                      $('.vbox-prev').css('display', 'none');
                      prevok = false;
                    }
                  }
                }
                
                 /* -------- NAVIGATION CODE -------- */
                var gallnav = {
                  
                  prev: function() {

                    if (keyNavigationDisabled) return; else keyNavigationDisabled = true;

                    overlayColor = theprev.data('overlay');

                    framewidth = theprev.data('framewidth');
                    frameheight = theprev.data('frameheight');
                    border = theprev.data('border');
                    bgcolor = theprev.data('bgcolor');

                    dest = theprev.attr('href');

                    if(theprev.attr(option.titleattr)){
                      title = theprev.attr(option.titleattr);
                    }else{
                      title = '';
                    }

                    if (overlayColor === undefined ) {
                      overlayColor = "";
                    }

                    overlay.css('min-height', $(window).outerHeight());

                    content.animate({ opacity:0}, 500, function(){
                    overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);

                      if (theprev.data('type') == 'iframe') {
                        loadIframe();
                      } else if (theprev.data('type') == 'inline'){
                        loadInline();
                      } else if (theprev.data('type') == 'ajax'){
                        loadAjax();
                      } else if (theprev.data('type') == 'youtube'){
                        loadYoutube();
                      } else if (theprev.data('type') == 'vimeo'){
                        loadVimeo();
                      }else{
                        content.html('<img src="'+dest+'">');
                        preloadFirst();
                      }
                      obj = theprev;
                      checknav();
                      keyNavigationDisabled = false;
                    });

                  },

                  next: function() {
                    
                    if (keyNavigationDisabled) return; else keyNavigationDisabled = true;

                    overlayColor = thenext.data('overlay');

                    framewidth = thenext.data('framewidth');
                    frameheight = thenext.data('frameheight');
                    border = thenext.data('border');
                    bgcolor = thenext.data('bgcolor');


                    dest = thenext.attr('href');

                    if(thenext.attr(option.titleattr)){
                      title = thenext.attr(option.titleattr);
                    }else{
                      title = '';
                    }

                    if (overlayColor === undefined ) {
                      overlayColor = "";
                    }

                    overlay.css('min-height', $(window).outerHeight());

                    content.animate({ opacity:0}, 500, function(){
                    overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);

                      if (thenext.data('type') == 'iframe') {
                        loadIframe();
                      } else if (thenext.data('type') == 'inline'){
                        loadInline();
                      } else if (thenext.data('type') == 'ajax'){
                        loadAjax();
                      } else if (thenext.data('type') == 'youtube'){
                        loadYoutube();
                      } else if (thenext.data('type') == 'vimeo'){
                        loadVimeo();
                      }else{
                        content.html('<img src="'+dest+'">');
                        preloadFirst();
                      }
                      obj = thenext;
                      checknav();
                      keyNavigationDisabled = false;
                    });

                  }

                };

                /* -------- NAVIGATE WITH ARROW KEYS -------- */
                $('body').keydown(function(e) {

                  if(e.keyCode == 37 && prevok == true) { // left
                    gallnav.prev();
                  }

                  if(e.keyCode == 39 && nextok == true) { // right
                    gallnav.next();
                  }

                });

                /* -------- PREVGALL -------- */
                $('.vbox-prev').click(function(){
                  gallnav.prev();
                });
                
                /* -------- NEXTGALL -------- */
                $('.vbox-next').click(function(){
                  gallnav.next();
                });
                
                /* -------- ESCAPE HANDLER -------- */
                function escapeHandler(e) {
                  if(e.keyCode === 27) {
                    closeVbox();
                  }
                }

                /* -------- CLOSE VBOX -------- */

                function closeVbox(){
                  
                  $('body').unbind('keydown', escapeHandler);

                  if (ie9) {

                    overlay.animate({opacity:0}, 500, function(){
                      overlay.remove();
                      $('.vwrap').children().unwrap();
                      $(window).scrollTop(-top);
                      keyNavigationDisabled = false;
                      obj.focus();
                    });

                  } else {

                    overlay.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
                    overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

                      // Check if transition is on the overlay - thanx @kanduvisla
                      if( e.target != e.currentTarget ) {
                        return;
                      }

                      overlay.remove();
                      if (ios) {
                        $('.vwrap').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
                          $('.vwrap').children().unwrap();
                          $(window).scrollTop(-top);
                        });
                        $('.vwrap').css('opacity', '1');
                      }else{
                        $('.vwrap').children().unwrap();
                        $(window).scrollTop(-top);
                      }
                      keyNavigationDisabled = false;
                      obj.focus();
                    });
                    overlay.css('opacity', '0');
                  }
                }

                /* -------- CLOSE CLICK -------- */
                var closeclickclass = '.vbox-close, .vbox-overlay';
                if(!obj.data('overlayclose')){
                    closeclickclass = '.vbox-close';    // close only on X
                }

                $(closeclickclass).click(function(e){
                  evitacontent = '.figlio';
                  evitaprev = '.vbox-prev';
                  evitanext = '.vbox-next';
                  figliall = '.figlio *';
                  if(!$(e.target).is(evitacontent) && !$(e.target).is(evitanext) && !$(e.target).is(evitaprev)&& !$(e.target).is(figliall)){
                    closeVbox();
                  }
                });
                $('body').keydown(escapeHandler);
                return false;
              });
        });
    }
});

/* -------- LOAD AJAX -------- */
function loadAjax(){
  $.ajax({
  url: dest,
  cache: false
  }).done(function( msg ) {
      content.html('<div class="vbox-inline">'+ msg +'</div>');
      updateoverlay(true);

  }).fail(function() {
      content.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>');
      updateoverlay(true);
  })
}

/* -------- LOAD IFRAME -------- */
function loadIframe(){
  content.html('<iframe class="venoframe" src="'+dest+'"></iframe>');
//  $('.venoframe').load(function(){ // valid only for iFrames in same domain
  updateoverlay();
//  });
}

/* -------- LOAD VIMEO -------- */
function loadVimeo(){
  var pezzi = dest.split('/');
  var videoid = pezzi[pezzi.length-1];
  content.html('<iframe class="venoframe" src="//player.vimeo.com/video/'+videoid+'"></iframe>');
  updateoverlay();
}

/* -------- LOAD YOUTUBE -------- */
function loadYoutube(){
  var pezzi = dest.split('/');
  var videoid = pezzi[pezzi.length-1];
  content.html('<iframe class="venoframe" allowfullscreen src="//www.youtube.com/embed/'+videoid+'"></iframe>');
  updateoverlay();
}

/* -------- LOAD INLINE -------- */
function loadInline(){
  content.html('<div class="vbox-inline">'+$(dest).html()+'</div>');
  updateoverlay();
}

/* -------- PRELOAD IMAGE -------- */
function preloadFirst(){
    prima = $('.vbox-content').find('img');
    prima.one('load', function() {
      updateoverlay();
    }).each(function() {
      if(this.complete) $(this).load();
    });
}

/* -------- CENTER ON LOAD -------- */
function updateoverlay(notopzero){
  notopzero = notopzero || false;
  if (notopzero != true) {
    $(window).scrollTop(0);
  }

  blocktitle.html(title);
  content.find(">:first-child").addClass('figlio');
  $('.figlio').css('width', framewidth).css('height', frameheight).css('padding', border).css('background', bgcolor);

  sonH = content.outerHeight();
  finH = $(window).height();

  if(sonH+80 < finH){
    margine = (finH - sonH)/2;
    content.css('margin-top', margine);
    content.css('margin-bottom', margine);

  }else{
    content.css('margin-top', '40px');
    content.css('margin-bottom', '40px');
  }
  content.animate({
    'opacity': '1'
  },'slow');
}

/* -------- CENTER ON RESIZE -------- */
function updateoverlayresize(){
  if($('.vbox-content').length){
    sonH = content.height();
    finH = $(window).height();

    if(sonH+80 < finH){
      margine = (finH - sonH)/2;
      content.css('margin-top', margine);
      content.css('margin-bottom', margine);

    }else{
      content.css('margin-top', '40px');
      content.css('margin-bottom', '40px');
    }
  }
}

$(window).resize(function(){
  updateoverlayresize();
});
<div class="vbox-close">X</div>

})(jQuery); Fancyboxで閉じるボタンを設置する場合などを参考に

<script type="text/javascript">
$('.vbox-close').click(function(){
    parent.$.○○○○○.close();
});</script>

parent以降の部分をvonoboxやcloseVboxなど色々変更してみたのですがダメでした。

(function($){

var ios, ie9, overlayColor, overlay, framewidth, border, bgcolor, frameheight, margine, sonH, finH, numeratio,
    vwrap, container, infinigall, content, core, dest, top, prima, type, thisgall, items, thenext, theprev,
    title, nextok, prevok, keyNavigationDisabled, blocktitle, blocknum, evitanext, evitaprev, evitacontent,
    figliall, extraCss;

$.fn.extend({
    //plugin name - venobox
    venobox: function(options) {

      // default option
      var defaults = {
          framewidth: '',
          frameheight: '',
          border: '0',
          bgcolor: '#fff',
          titleattr: 'title', // specific attribute to get a title (e.g. [data-title]) - thanx @mendezcode
          numeratio: false,
          infinigall: false,
          overlayclose: true // disable overlay click-close - thanx @martybalandis 
      };

      var option = $.extend(defaults, options);

        return this.each(function() {
              var obj = $(this);

              // Prevent double initialization - thanx @matthistuff
              if(obj.data('venobox')) {
                return true;
              }

              obj.addClass('vbox-item');
              obj.data('framewidth', option.framewidth);
              obj.data('margin-top', option.margint);
              obj.data('frameheight', option.frameheight);
              obj.data('border', option.border);
              obj.data('bgcolor', option.bgcolor);
              obj.data('numeratio', option.numeratio);
              obj.data('infinigall', option.infinigall);
              obj.data('overlayclose', option.overlayclose);
              obj.data('venobox', true);

              ios = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);

              // IE 9 or less
              ie9 = ((document.all && !window.atob) ? true : false);

              obj.click(function(e){
                e.stopPropagation();
                e.preventDefault();
                obj = $(this);
                overlayColor = obj.data('overlay');
                framewidth = obj.data('framewidth');
                frameheight = obj.data('frameheight');
                border = obj.data('border');
                bgcolor = obj.data('bgcolor');
                nextok = false;
                prevok = false;
                keyNavigationDisabled = false;
                dest = obj.attr('href');
                top = $(window).scrollTop();
                top = -top;
                extraCss = obj.data( 'css' ) || "";

                $('body').wrapInner('<div class="vwrap"></div>');

                vwrap = $('.vwrap');
                core = '<div class="vbox-overlay ' + extraCss + '" style="background:'+ overlayColor +'"><div class="vbox-preloader">Loading...</div><div class="vbox-container"><div class="vbox-close">X</div><div class="vbox-content"></div></div><div class="vbox-title"></div><div class="vbox-next">next</div><div class="vbox-prev">prev</div></div>';

                $('body').append(core);

                overlay = $('.vbox-overlay');
                container = $('.vbox-container');
                content = $('.vbox-content');
                blocknum = $('.vbox-num');
                blocktitle = $('.vbox-title');

                content.html('');
                content.css('opacity', '0');

                checknav();

                overlay.css('min-height', $(window).outerHeight());

                if (ie9) {
                  overlay.animate({opacity:1}, 250, function(){
                    overlay.css({
                      'min-height': $(window).outerHeight(),
                      height : 'auto'
                    });
                    if(obj.data('type') == 'iframe'){
                      loadIframe();
                    }else if (obj.data('type') == 'inline'){
                      loadInline();
                    }else if (obj.data('type') == 'ajax'){
                      loadAjax();
                    }else if (obj.data('type') == 'vimeo'){
                      loadVimeo();
                    }else if (obj.data('type') == 'youtube'){
                      loadYoutube();
                    } else {
                      content.html('<img src="'+dest+'">');
                      preloadFirst();
                    }
                  });
                } else {
                  overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

                    // Check if transition is on the overlay - thanx @kanduvisla
                    if( e.target != e.currentTarget ) {
                      return;
                    }
                    
                    overlay.css({
                      'min-height': $(window).outerHeight(),
                      height : 'auto'
                    });
                    if(obj.data('type') == 'iframe'){
                      loadIframe();
                    }else if (obj.data('type') == 'inline'){
                      loadInline();
                    }else if (obj.data('type') == 'ajax'){
                      loadAjax();
                    }else if (obj.data('type') == 'vimeo'){
                      loadVimeo();
                    }else if (obj.data('type') == 'youtube'){
                      loadYoutube();
                    } else {
                      content.html('<img src="'+dest+'">');
                      preloadFirst();
                    }
                  });
                  overlay.css('opacity', '1');
                }

                if (ios) {
                  vwrap.css({
                    'position': 'fixed',
                    'top': top,
                    'opacity': '0'
                  }).data('top', top);
                } else {
                  vwrap.css({
                    'position': 'fixed',
                    'top': top
                  }).data('top', top);
                  $(window).scrollTop(0);
                }

                /* -------- CHECK NEXT / PREV -------- */
                function checknav(){

                  thisgall = obj.data('gall');
                  numeratio = obj.data('numeratio');
                  infinigall = obj.data('infinigall');

                  items = $('.vbox-item[data-gall="' + thisgall + '"]');

                  if(items.length > 0 && numeratio === true){
                    blocknum.html(items.index(obj)+1 + ' / ' + items.length);
                    blocknum.fadeIn();
                  }else{
                    blocknum.fadeOut();
                  }

                  thenext = items.eq( items.index(obj) + 1 );
                  theprev = items.eq( items.index(obj) - 1 );

                  if(obj.attr(option.titleattr)){
                    title = obj.attr(option.titleattr);
                    blocktitle.fadeIn();
                  }else{
                    title = '';
                    blocktitle.fadeOut();
                  }

                  if (items.length > 0 && infinigall === true) {

                    nextok = true;
                    prevok = true;

                    if(thenext.length < 1 ){
                      thenext = items.eq(0);
                    }
                    if(items.index(obj) < 1 ){
                      theprev = items.eq( items.index(items.length) );
                    }

                  } else {

                    if(thenext.length > 0 ){
                      $('.vbox-next').css('display', 'block');
                      nextok = true;
                    }else{
                      $('.vbox-next').css('display', 'none');
                      nextok = false;
                    }
                    if(items.index(obj) > 0 ){
                      $('.vbox-prev').css('display', 'block');
                      prevok = true;
                    }else{
                      $('.vbox-prev').css('display', 'none');
                      prevok = false;
                    }
                  }
                }
                
                 /* -------- NAVIGATION CODE -------- */
                var gallnav = {
                  
                  prev: function() {

                    if (keyNavigationDisabled) return; else keyNavigationDisabled = true;

                    overlayColor = theprev.data('overlay');

                    framewidth = theprev.data('framewidth');
                    frameheight = theprev.data('frameheight');
                    border = theprev.data('border');
                    bgcolor = theprev.data('bgcolor');

                    dest = theprev.attr('href');

                    if(theprev.attr(option.titleattr)){
                      title = theprev.attr(option.titleattr);
                    }else{
                      title = '';
                    }

                    if (overlayColor === undefined ) {
                      overlayColor = "";
                    }

                    overlay.css('min-height', $(window).outerHeight());

                    content.animate({ opacity:0}, 500, function(){
                    overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);

                      if (theprev.data('type') == 'iframe') {
                        loadIframe();
                      } else if (theprev.data('type') == 'inline'){
                        loadInline();
                      } else if (theprev.data('type') == 'ajax'){
                        loadAjax();
                      } else if (theprev.data('type') == 'youtube'){
                        loadYoutube();
                      } else if (theprev.data('type') == 'vimeo'){
                        loadVimeo();
                      }else{
                        content.html('<img src="'+dest+'">');
                        preloadFirst();
                      }
                      obj = theprev;
                      checknav();
                      keyNavigationDisabled = false;
                    });

                  },

                  next: function() {
                    
                    if (keyNavigationDisabled) return; else keyNavigationDisabled = true;

                    overlayColor = thenext.data('overlay');

                    framewidth = thenext.data('framewidth');
                    frameheight = thenext.data('frameheight');
                    border = thenext.data('border');
                    bgcolor = thenext.data('bgcolor');


                    dest = thenext.attr('href');

                    if(thenext.attr(option.titleattr)){
                      title = thenext.attr(option.titleattr);
                    }else{
                      title = '';
                    }

                    if (overlayColor === undefined ) {
                      overlayColor = "";
                    }

                    overlay.css('min-height', $(window).outerHeight());

                    content.animate({ opacity:0}, 500, function(){
                    overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);

                      if (thenext.data('type') == 'iframe') {
                        loadIframe();
                      } else if (thenext.data('type') == 'inline'){
                        loadInline();
                      } else if (thenext.data('type') == 'ajax'){
                        loadAjax();
                      } else if (thenext.data('type') == 'youtube'){
                        loadYoutube();
                      } else if (thenext.data('type') == 'vimeo'){
                        loadVimeo();
                      }else{
                        content.html('<img src="'+dest+'">');
                        preloadFirst();
                      }
                      obj = thenext;
                      checknav();
                      keyNavigationDisabled = false;
                    });

                  }

                };

                /* -------- NAVIGATE WITH ARROW KEYS -------- */
                $('body').keydown(function(e) {

                  if(e.keyCode == 37 && prevok == true) { // left
                    gallnav.prev();
                  }

                  if(e.keyCode == 39 && nextok == true) { // right
                    gallnav.next();
                  }

                });

                /* -------- PREVGALL -------- */
                $('.vbox-prev').click(function(){
                  gallnav.prev();
                });
                
                /* -------- NEXTGALL -------- */
                $('.vbox-next').click(function(){
                  gallnav.next();
                });
                
                /* -------- ESCAPE HANDLER -------- */
                function escapeHandler(e) {
                  if(e.keyCode === 27) {
                    closeVbox();
                  }
                }

                /* -------- CLOSE VBOX -------- */

                function closeVbox(){
                  
                  $('body').unbind('keydown', escapeHandler);

                  if (ie9) {

                    overlay.animate({opacity:0}, 500, function(){
                      overlay.remove();
                      $('.vwrap').children().unwrap();
                      $(window).scrollTop(-top);
                      keyNavigationDisabled = false;
                      obj.focus();
                    });

                  } else {

                    overlay.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
                    overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

                      // Check if transition is on the overlay - thanx @kanduvisla
                      if( e.target != e.currentTarget ) {
                        return;
                      }

                      overlay.remove();
                      if (ios) {
                        $('.vwrap').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
                          $('.vwrap').children().unwrap();
                          $(window).scrollTop(-top);
                        });
                        $('.vwrap').css('opacity', '1');
                      }else{
                        $('.vwrap').children().unwrap();
                        $(window).scrollTop(-top);
                      }
                      keyNavigationDisabled = false;
                      obj.focus();
                    });
                    overlay.css('opacity', '0');
                  }
                }

                /* -------- CLOSE CLICK -------- */
                var closeclickclass = '.vbox-close, .vbox-overlay';
                if(!obj.data('overlayclose')){
                    closeclickclass = '.vbox-close';    // close only on X
                }

                $(closeclickclass).click(function(e){
                  evitacontent = '.figlio';
                  evitaprev = '.vbox-prev';
                  evitanext = '.vbox-next';
                  figliall = '.figlio *';
                  if(!$(e.target).is(evitacontent) && !$(e.target).is(evitanext) && !$(e.target).is(evitaprev)&& !$(e.target).is(figliall)){
                    closeVbox();
                  }
                });
                $('body').keydown(escapeHandler);
                return false;
              });
        });
    }
});

/* -------- LOAD AJAX -------- */
function loadAjax(){
  $.ajax({
  url: dest,
  cache: false
  }).done(function( msg ) {
      content.html('<div class="vbox-inline">'+ msg +'</div>');
      updateoverlay(true);

  }).fail(function() {
      content.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>');
      updateoverlay(true);
  })
}

/* -------- LOAD IFRAME -------- */
function loadIframe(){
  content.html('<iframe class="venoframe" src="'+dest+'"></iframe>');
//  $('.venoframe').load(function(){ // valid only for iFrames in same domain
  updateoverlay();
//  });
}

/* -------- LOAD VIMEO -------- */
function loadVimeo(){
  var pezzi = dest.split('/');
  var videoid = pezzi[pezzi.length-1];
  content.html('<iframe class="venoframe" src="//player.vimeo.com/video/'+videoid+'"></iframe>');
  updateoverlay();
}

/* -------- LOAD YOUTUBE -------- */
function loadYoutube(){
  var pezzi = dest.split('/');
  var videoid = pezzi[pezzi.length-1];
  content.html('<iframe class="venoframe" allowfullscreen src="//www.youtube.com/embed/'+videoid+'"></iframe>');
  updateoverlay();
}

/* -------- LOAD INLINE -------- */
function loadInline(){
  content.html('<div class="vbox-inline">'+$(dest).html()+'</div>');
  updateoverlay();
}

/* -------- PRELOAD IMAGE -------- */
function preloadFirst(){
    prima = $('.vbox-content').find('img');
    prima.one('load', function() {
      updateoverlay();
    }).each(function() {
      if(this.complete) $(this).load();
    });
}

/* -------- CENTER ON LOAD -------- */
function updateoverlay(notopzero){
  notopzero = notopzero || false;
  if (notopzero != true) {
    $(window).scrollTop(0);
  }

  blocktitle.html(title);
  content.find(">:first-child").addClass('figlio');
  $('.figlio').css('width', framewidth).css('height', frameheight).css('padding', border).css('background', bgcolor);

  sonH = content.outerHeight();
  finH = $(window).height();

  if(sonH+80 < finH){
    margine = (finH - sonH)/2;
    content.css('margin-top', margine);
    content.css('margin-bottom', margine);

  }else{
    content.css('margin-top', '40px');
    content.css('margin-bottom', '40px');
  }
  content.animate({
    'opacity': '1'
  },'slow');
}

/* -------- CENTER ON RESIZE -------- */
function updateoverlayresize(){
  if($('.vbox-content').length){
    sonH = content.height();
    finH = $(window).height();

    if(sonH+80 < finH){
      margine = (finH - sonH)/2;
      content.css('margin-top', margine);
      content.css('margin-bottom', margine);

    }else{
      content.css('margin-top', '40px');
      content.css('margin-bottom', '40px');
    }
  }
}

$(window).resize(function(){
  updateoverlayresize();
});

})(jQuery);

私の試した方法は下記を読み込まれる側のHTMLに設置

<div class="vbox-close">X</div>

Fancyboxで閉じるボタンを設置する場合などを参考に

<script type="text/javascript">
$('.vbox-close').click(function(){
    parent.$.○○○○○.close();
});</script>

parent以降の部分をvonoboxやcloseVboxなど色々変更してみたのですがダメでした。

本文に 20509 文字追加
ソース リンク

【追記】
少し質問内容がおかしかったので追記させていただきます。
アイフレームで読み込まれる側に閉じるボタンが設置できれば
閉じるボタンが枠内に表示されることになるので、私の質問はひとつでした。
何卒ご教授の程よろしくお願いいたします。

(function($){

var ios, ie9, overlayColor, overlay, framewidth, border, bgcolor, frameheight, margine, sonH, finH, numeratio,
    vwrap, container, infinigall, content, core, dest, top, prima, type, thisgall, items, thenext, theprev,
    title, nextok, prevok, keyNavigationDisabled, blocktitle, blocknum, evitanext, evitaprev, evitacontent,
    figliall, extraCss;

$.fn.extend({
    //plugin name - venobox
    venobox: function(options) {

      // default option
      var defaults = {
          framewidth: '',
          frameheight: '',
          border: '0',
          bgcolor: '#fff',
          titleattr: 'title', // specific attribute to get a title (e.g. [data-title]) - thanx @mendezcode
          numeratio: false,
          infinigall: false,
          overlayclose: true // disable overlay click-close - thanx @martybalandis 
      };

      var option = $.extend(defaults, options);

        return this.each(function() {
              var obj = $(this);

              // Prevent double initialization - thanx @matthistuff
              if(obj.data('venobox')) {
                return true;
              }

              obj.addClass('vbox-item');
              obj.data('framewidth', option.framewidth);
              obj.data('margin-top', option.margint);
              obj.data('frameheight', option.frameheight);
              obj.data('border', option.border);
              obj.data('bgcolor', option.bgcolor);
              obj.data('numeratio', option.numeratio);
              obj.data('infinigall', option.infinigall);
              obj.data('overlayclose', option.overlayclose);
              obj.data('venobox', true);

              ios = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);

              // IE 9 or less
              ie9 = ((document.all && !window.atob) ? true : false);

              obj.click(function(e){
                e.stopPropagation();
                e.preventDefault();
                obj = $(this);
                overlayColor = obj.data('overlay');
                framewidth = obj.data('framewidth');
                frameheight = obj.data('frameheight');
                border = obj.data('border');
                bgcolor = obj.data('bgcolor');
                nextok = false;
                prevok = false;
                keyNavigationDisabled = false;
                dest = obj.attr('href');
                top = $(window).scrollTop();
                top = -top;
                extraCss = obj.data( 'css' ) || "";

                $('body').wrapInner('<div class="vwrap"></div>');

                vwrap = $('.vwrap');
                core = '<div class="vbox-overlay ' + extraCss + '" style="background:'+ overlayColor +'"><div class="vbox-preloader">Loading...</div><div class="vbox-container"><div class="vbox-close">X</div><div class="vbox-content"></div></div><div class="vbox-title"></div><div class="vbox-next">next</div><div class="vbox-prev">prev</div></div>';

                $('body').append(core);

                overlay = $('.vbox-overlay');
                container = $('.vbox-container');
                content = $('.vbox-content');
                blocknum = $('.vbox-num');
                blocktitle = $('.vbox-title');

                content.html('');
                content.css('opacity', '0');

                checknav();

                overlay.css('min-height', $(window).outerHeight());

                if (ie9) {
                  overlay.animate({opacity:1}, 250, function(){
                    overlay.css({
                      'min-height': $(window).outerHeight(),
                      height : 'auto'
                    });
                    if(obj.data('type') == 'iframe'){
                      loadIframe();
                    }else if (obj.data('type') == 'inline'){
                      loadInline();
                    }else if (obj.data('type') == 'ajax'){
                      loadAjax();
                    }else if (obj.data('type') == 'vimeo'){
                      loadVimeo();
                    }else if (obj.data('type') == 'youtube'){
                      loadYoutube();
                    } else {
                      content.html('<img src="'+dest+'">');
                      preloadFirst();
                    }
                  });
                } else {
                  overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

                    // Check if transition is on the overlay - thanx @kanduvisla
                    if( e.target != e.currentTarget ) {
                      return;
                    }
                    
                    overlay.css({
                      'min-height': $(window).outerHeight(),
                      height : 'auto'
                    });
                    if(obj.data('type') == 'iframe'){
                      loadIframe();
                    }else if (obj.data('type') == 'inline'){
                      loadInline();
                    }else if (obj.data('type') == 'ajax'){
                      loadAjax();
                    }else if (obj.data('type') == 'vimeo'){
                      loadVimeo();
                    }else if (obj.data('type') == 'youtube'){
                      loadYoutube();
                    } else {
                      content.html('<img src="'+dest+'">');
                      preloadFirst();
                    }
                  });
                  overlay.css('opacity', '1');
                }

                if (ios) {
                  vwrap.css({
                    'position': 'fixed',
                    'top': top,
                    'opacity': '0'
                  }).data('top', top);
                } else {
                  vwrap.css({
                    'position': 'fixed',
                    'top': top
                  }).data('top', top);
                  $(window).scrollTop(0);
                }

                /* -------- CHECK NEXT / PREV -------- */
                function checknav(){

                  thisgall = obj.data('gall');
                  numeratio = obj.data('numeratio');
                  infinigall = obj.data('infinigall');

                  items = $('.vbox-item[data-gall="' + thisgall + '"]');

                  if(items.length > 0 && numeratio === true){
                    blocknum.html(items.index(obj)+1 + ' / ' + items.length);
                    blocknum.fadeIn();
                  }else{
                    blocknum.fadeOut();
                  }

                  thenext = items.eq( items.index(obj) + 1 );
                  theprev = items.eq( items.index(obj) - 1 );

                  if(obj.attr(option.titleattr)){
                    title = obj.attr(option.titleattr);
                    blocktitle.fadeIn();
                  }else{
                    title = '';
                    blocktitle.fadeOut();
                  }

                  if (items.length > 0 && infinigall === true) {

                    nextok = true;
                    prevok = true;

                    if(thenext.length < 1 ){
                      thenext = items.eq(0);
                    }
                    if(items.index(obj) < 1 ){
                      theprev = items.eq( items.index(items.length) );
                    }

                  } else {

                    if(thenext.length > 0 ){
                      $('.vbox-next').css('display', 'block');
                      nextok = true;
                    }else{
                      $('.vbox-next').css('display', 'none');
                      nextok = false;
                    }
                    if(items.index(obj) > 0 ){
                      $('.vbox-prev').css('display', 'block');
                      prevok = true;
                    }else{
                      $('.vbox-prev').css('display', 'none');
                      prevok = false;
                    }
                  }
                }
                
                 /* -------- NAVIGATION CODE -------- */
                var gallnav = {
                  
                  prev: function() {

                    if (keyNavigationDisabled) return; else keyNavigationDisabled = true;

                    overlayColor = theprev.data('overlay');

                    framewidth = theprev.data('framewidth');
                    frameheight = theprev.data('frameheight');
                    border = theprev.data('border');
                    bgcolor = theprev.data('bgcolor');

                    dest = theprev.attr('href');

                    if(theprev.attr(option.titleattr)){
                      title = theprev.attr(option.titleattr);
                    }else{
                      title = '';
                    }

                    if (overlayColor === undefined ) {
                      overlayColor = "";
                    }

                    overlay.css('min-height', $(window).outerHeight());

                    content.animate({ opacity:0}, 500, function(){
                    overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);

                      if (theprev.data('type') == 'iframe') {
                        loadIframe();
                      } else if (theprev.data('type') == 'inline'){
                        loadInline();
                      } else if (theprev.data('type') == 'ajax'){
                        loadAjax();
                      } else if (theprev.data('type') == 'youtube'){
                        loadYoutube();
                      } else if (theprev.data('type') == 'vimeo'){
                        loadVimeo();
                      }else{
                        content.html('<img src="'+dest+'">');
                        preloadFirst();
                      }
                      obj = theprev;
                      checknav();
                      keyNavigationDisabled = false;
                    });

                  },

                  next: function() {
                    
                    if (keyNavigationDisabled) return; else keyNavigationDisabled = true;

                    overlayColor = thenext.data('overlay');

                    framewidth = thenext.data('framewidth');
                    frameheight = thenext.data('frameheight');
                    border = thenext.data('border');
                    bgcolor = thenext.data('bgcolor');


                    dest = thenext.attr('href');

                    if(thenext.attr(option.titleattr)){
                      title = thenext.attr(option.titleattr);
                    }else{
                      title = '';
                    }

                    if (overlayColor === undefined ) {
                      overlayColor = "";
                    }

                    overlay.css('min-height', $(window).outerHeight());

                    content.animate({ opacity:0}, 500, function(){
                    overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);

                      if (thenext.data('type') == 'iframe') {
                        loadIframe();
                      } else if (thenext.data('type') == 'inline'){
                        loadInline();
                      } else if (thenext.data('type') == 'ajax'){
                        loadAjax();
                      } else if (thenext.data('type') == 'youtube'){
                        loadYoutube();
                      } else if (thenext.data('type') == 'vimeo'){
                        loadVimeo();
                      }else{
                        content.html('<img src="'+dest+'">');
                        preloadFirst();
                      }
                      obj = thenext;
                      checknav();
                      keyNavigationDisabled = false;
                    });

                  }

                };

                /* -------- NAVIGATE WITH ARROW KEYS -------- */
                $('body').keydown(function(e) {

                  if(e.keyCode == 37 && prevok == true) { // left
                    gallnav.prev();
                  }

                  if(e.keyCode == 39 && nextok == true) { // right
                    gallnav.next();
                  }

                });

                /* -------- PREVGALL -------- */
                $('.vbox-prev').click(function(){
                  gallnav.prev();
                });
                
                /* -------- NEXTGALL -------- */
                $('.vbox-next').click(function(){
                  gallnav.next();
                });
                
                /* -------- ESCAPE HANDLER -------- */
                function escapeHandler(e) {
                  if(e.keyCode === 27) {
                    closeVbox();
                  }
                }

                /* -------- CLOSE VBOX -------- */

                function closeVbox(){
                  
                  $('body').unbind('keydown', escapeHandler);

                  if (ie9) {

                    overlay.animate({opacity:0}, 500, function(){
                      overlay.remove();
                      $('.vwrap').children().unwrap();
                      $(window).scrollTop(-top);
                      keyNavigationDisabled = false;
                      obj.focus();
                    });

                  } else {

                    overlay.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
                    overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

                      // Check if transition is on the overlay - thanx @kanduvisla
                      if( e.target != e.currentTarget ) {
                        return;
                      }

                      overlay.remove();
                      if (ios) {
                        $('.vwrap').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
                          $('.vwrap').children().unwrap();
                          $(window).scrollTop(-top);
                        });
                        $('.vwrap').css('opacity', '1');
                      }else{
                        $('.vwrap').children().unwrap();
                        $(window).scrollTop(-top);
                      }
                      keyNavigationDisabled = false;
                      obj.focus();
                    });
                    overlay.css('opacity', '0');
                  }
                }

                /* -------- CLOSE CLICK -------- */
                var closeclickclass = '.vbox-close, .vbox-overlay';
                if(!obj.data('overlayclose')){
                    closeclickclass = '.vbox-close';    // close only on X
                }

                $(closeclickclass).click(function(e){
                  evitacontent = '.figlio';
                  evitaprev = '.vbox-prev';
                  evitanext = '.vbox-next';
                  figliall = '.figlio *';
                  if(!$(e.target).is(evitacontent) && !$(e.target).is(evitanext) && !$(e.target).is(evitaprev)&& !$(e.target).is(figliall)){
                    closeVbox();
                  }
                });
                $('body').keydown(escapeHandler);
                return false;
              });
        });
    }
});

/* -------- LOAD AJAX -------- */
function loadAjax(){
  $.ajax({
  url: dest,
  cache: false
  }).done(function( msg ) {
      content.html('<div class="vbox-inline">'+ msg +'</div>');
      updateoverlay(true);

  }).fail(function() {
      content.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>');
      updateoverlay(true);
  })
}

/* -------- LOAD IFRAME -------- */
function loadIframe(){
  content.html('<iframe class="venoframe" src="'+dest+'"></iframe>');
//  $('.venoframe').load(function(){ // valid only for iFrames in same domain
  updateoverlay();
//  });
}

/* -------- LOAD VIMEO -------- */
function loadVimeo(){
  var pezzi = dest.split('/');
  var videoid = pezzi[pezzi.length-1];
  content.html('<iframe class="venoframe" src="//player.vimeo.com/video/'+videoid+'"></iframe>');
  updateoverlay();
}

/* -------- LOAD YOUTUBE -------- */
function loadYoutube(){
  var pezzi = dest.split('/');
  var videoid = pezzi[pezzi.length-1];
  content.html('<iframe class="venoframe" allowfullscreen src="//www.youtube.com/embed/'+videoid+'"></iframe>');
  updateoverlay();
}

/* -------- LOAD INLINE -------- */
function loadInline(){
  content.html('<div class="vbox-inline">'+$(dest).html()+'</div>');
  updateoverlay();
}

/* -------- PRELOAD IMAGE -------- */
function preloadFirst(){
    prima = $('.vbox-content').find('img');
    prima.one('load', function() {
      updateoverlay();
    }).each(function() {
      if(this.complete) $(this).load();
    });
}

/* -------- CENTER ON LOAD -------- */
function updateoverlay(notopzero){
  notopzero = notopzero || false;
  if (notopzero != true) {
    $(window).scrollTop(0);
  }

  blocktitle.html(title);
  content.find(">:first-child").addClass('figlio');
  $('.figlio').css('width', framewidth).css('height', frameheight).css('padding', border).css('background', bgcolor);

  sonH = content.outerHeight();
  finH = $(window).height();

  if(sonH+80 < finH){
    margine = (finH - sonH)/2;
    content.css('margin-top', margine);
    content.css('margin-bottom', margine);

  }else{
    content.css('margin-top', '40px');
    content.css('margin-bottom', '40px');
  }
  content.animate({
    'opacity': '1'
  },'slow');
}

/* -------- CENTER ON RESIZE -------- */
function updateoverlayresize(){
  if($('.vbox-content').length){
    sonH = content.height();
    finH = $(window).height();

    if(sonH+80 < finH){
      margine = (finH - sonH)/2;
      content.css('margin-top', margine);
      content.css('margin-bottom', margine);

    }else{
      content.css('margin-top', '40px');
      content.css('margin-bottom', '40px');
    }
  }
}

$(window).resize(function(){
  updateoverlayresize();
});

})(jQuery);

【追記】
少し質問内容がおかしかったので追記させていただきます。
アイフレームで読み込まれる側に閉じるボタンが設置できれば
閉じるボタンが枠内に表示されることになるので、私の質問はひとつでした。
何卒ご教授の程よろしくお願いいたします。

(function($){

var ios, ie9, overlayColor, overlay, framewidth, border, bgcolor, frameheight, margine, sonH, finH, numeratio,
    vwrap, container, infinigall, content, core, dest, top, prima, type, thisgall, items, thenext, theprev,
    title, nextok, prevok, keyNavigationDisabled, blocktitle, blocknum, evitanext, evitaprev, evitacontent,
    figliall, extraCss;

$.fn.extend({
    //plugin name - venobox
    venobox: function(options) {

      // default option
      var defaults = {
          framewidth: '',
          frameheight: '',
          border: '0',
          bgcolor: '#fff',
          titleattr: 'title', // specific attribute to get a title (e.g. [data-title]) - thanx @mendezcode
          numeratio: false,
          infinigall: false,
          overlayclose: true // disable overlay click-close - thanx @martybalandis 
      };

      var option = $.extend(defaults, options);

        return this.each(function() {
              var obj = $(this);

              // Prevent double initialization - thanx @matthistuff
              if(obj.data('venobox')) {
                return true;
              }

              obj.addClass('vbox-item');
              obj.data('framewidth', option.framewidth);
              obj.data('margin-top', option.margint);
              obj.data('frameheight', option.frameheight);
              obj.data('border', option.border);
              obj.data('bgcolor', option.bgcolor);
              obj.data('numeratio', option.numeratio);
              obj.data('infinigall', option.infinigall);
              obj.data('overlayclose', option.overlayclose);
              obj.data('venobox', true);

              ios = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);

              // IE 9 or less
              ie9 = ((document.all && !window.atob) ? true : false);

              obj.click(function(e){
                e.stopPropagation();
                e.preventDefault();
                obj = $(this);
                overlayColor = obj.data('overlay');
                framewidth = obj.data('framewidth');
                frameheight = obj.data('frameheight');
                border = obj.data('border');
                bgcolor = obj.data('bgcolor');
                nextok = false;
                prevok = false;
                keyNavigationDisabled = false;
                dest = obj.attr('href');
                top = $(window).scrollTop();
                top = -top;
                extraCss = obj.data( 'css' ) || "";

                $('body').wrapInner('<div class="vwrap"></div>');

                vwrap = $('.vwrap');
                core = '<div class="vbox-overlay ' + extraCss + '" style="background:'+ overlayColor +'"><div class="vbox-preloader">Loading...</div><div class="vbox-container"><div class="vbox-close">X</div><div class="vbox-content"></div></div><div class="vbox-title"></div><div class="vbox-next">next</div><div class="vbox-prev">prev</div></div>';

                $('body').append(core);

                overlay = $('.vbox-overlay');
                container = $('.vbox-container');
                content = $('.vbox-content');
                blocknum = $('.vbox-num');
                blocktitle = $('.vbox-title');

                content.html('');
                content.css('opacity', '0');

                checknav();

                overlay.css('min-height', $(window).outerHeight());

                if (ie9) {
                  overlay.animate({opacity:1}, 250, function(){
                    overlay.css({
                      'min-height': $(window).outerHeight(),
                      height : 'auto'
                    });
                    if(obj.data('type') == 'iframe'){
                      loadIframe();
                    }else if (obj.data('type') == 'inline'){
                      loadInline();
                    }else if (obj.data('type') == 'ajax'){
                      loadAjax();
                    }else if (obj.data('type') == 'vimeo'){
                      loadVimeo();
                    }else if (obj.data('type') == 'youtube'){
                      loadYoutube();
                    } else {
                      content.html('<img src="'+dest+'">');
                      preloadFirst();
                    }
                  });
                } else {
                  overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

                    // Check if transition is on the overlay - thanx @kanduvisla
                    if( e.target != e.currentTarget ) {
                      return;
                    }
                    
                    overlay.css({
                      'min-height': $(window).outerHeight(),
                      height : 'auto'
                    });
                    if(obj.data('type') == 'iframe'){
                      loadIframe();
                    }else if (obj.data('type') == 'inline'){
                      loadInline();
                    }else if (obj.data('type') == 'ajax'){
                      loadAjax();
                    }else if (obj.data('type') == 'vimeo'){
                      loadVimeo();
                    }else if (obj.data('type') == 'youtube'){
                      loadYoutube();
                    } else {
                      content.html('<img src="'+dest+'">');
                      preloadFirst();
                    }
                  });
                  overlay.css('opacity', '1');
                }

                if (ios) {
                  vwrap.css({
                    'position': 'fixed',
                    'top': top,
                    'opacity': '0'
                  }).data('top', top);
                } else {
                  vwrap.css({
                    'position': 'fixed',
                    'top': top
                  }).data('top', top);
                  $(window).scrollTop(0);
                }

                /* -------- CHECK NEXT / PREV -------- */
                function checknav(){

                  thisgall = obj.data('gall');
                  numeratio = obj.data('numeratio');
                  infinigall = obj.data('infinigall');

                  items = $('.vbox-item[data-gall="' + thisgall + '"]');

                  if(items.length > 0 && numeratio === true){
                    blocknum.html(items.index(obj)+1 + ' / ' + items.length);
                    blocknum.fadeIn();
                  }else{
                    blocknum.fadeOut();
                  }

                  thenext = items.eq( items.index(obj) + 1 );
                  theprev = items.eq( items.index(obj) - 1 );

                  if(obj.attr(option.titleattr)){
                    title = obj.attr(option.titleattr);
                    blocktitle.fadeIn();
                  }else{
                    title = '';
                    blocktitle.fadeOut();
                  }

                  if (items.length > 0 && infinigall === true) {

                    nextok = true;
                    prevok = true;

                    if(thenext.length < 1 ){
                      thenext = items.eq(0);
                    }
                    if(items.index(obj) < 1 ){
                      theprev = items.eq( items.index(items.length) );
                    }

                  } else {

                    if(thenext.length > 0 ){
                      $('.vbox-next').css('display', 'block');
                      nextok = true;
                    }else{
                      $('.vbox-next').css('display', 'none');
                      nextok = false;
                    }
                    if(items.index(obj) > 0 ){
                      $('.vbox-prev').css('display', 'block');
                      prevok = true;
                    }else{
                      $('.vbox-prev').css('display', 'none');
                      prevok = false;
                    }
                  }
                }
                
                 /* -------- NAVIGATION CODE -------- */
                var gallnav = {
                  
                  prev: function() {

                    if (keyNavigationDisabled) return; else keyNavigationDisabled = true;

                    overlayColor = theprev.data('overlay');

                    framewidth = theprev.data('framewidth');
                    frameheight = theprev.data('frameheight');
                    border = theprev.data('border');
                    bgcolor = theprev.data('bgcolor');

                    dest = theprev.attr('href');

                    if(theprev.attr(option.titleattr)){
                      title = theprev.attr(option.titleattr);
                    }else{
                      title = '';
                    }

                    if (overlayColor === undefined ) {
                      overlayColor = "";
                    }

                    overlay.css('min-height', $(window).outerHeight());

                    content.animate({ opacity:0}, 500, function(){
                    overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);

                      if (theprev.data('type') == 'iframe') {
                        loadIframe();
                      } else if (theprev.data('type') == 'inline'){
                        loadInline();
                      } else if (theprev.data('type') == 'ajax'){
                        loadAjax();
                      } else if (theprev.data('type') == 'youtube'){
                        loadYoutube();
                      } else if (theprev.data('type') == 'vimeo'){
                        loadVimeo();
                      }else{
                        content.html('<img src="'+dest+'">');
                        preloadFirst();
                      }
                      obj = theprev;
                      checknav();
                      keyNavigationDisabled = false;
                    });

                  },

                  next: function() {
                    
                    if (keyNavigationDisabled) return; else keyNavigationDisabled = true;

                    overlayColor = thenext.data('overlay');

                    framewidth = thenext.data('framewidth');
                    frameheight = thenext.data('frameheight');
                    border = thenext.data('border');
                    bgcolor = thenext.data('bgcolor');


                    dest = thenext.attr('href');

                    if(thenext.attr(option.titleattr)){
                      title = thenext.attr(option.titleattr);
                    }else{
                      title = '';
                    }

                    if (overlayColor === undefined ) {
                      overlayColor = "";
                    }

                    overlay.css('min-height', $(window).outerHeight());

                    content.animate({ opacity:0}, 500, function(){
                    overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);

                      if (thenext.data('type') == 'iframe') {
                        loadIframe();
                      } else if (thenext.data('type') == 'inline'){
                        loadInline();
                      } else if (thenext.data('type') == 'ajax'){
                        loadAjax();
                      } else if (thenext.data('type') == 'youtube'){
                        loadYoutube();
                      } else if (thenext.data('type') == 'vimeo'){
                        loadVimeo();
                      }else{
                        content.html('<img src="'+dest+'">');
                        preloadFirst();
                      }
                      obj = thenext;
                      checknav();
                      keyNavigationDisabled = false;
                    });

                  }

                };

                /* -------- NAVIGATE WITH ARROW KEYS -------- */
                $('body').keydown(function(e) {

                  if(e.keyCode == 37 && prevok == true) { // left
                    gallnav.prev();
                  }

                  if(e.keyCode == 39 && nextok == true) { // right
                    gallnav.next();
                  }

                });

                /* -------- PREVGALL -------- */
                $('.vbox-prev').click(function(){
                  gallnav.prev();
                });
                
                /* -------- NEXTGALL -------- */
                $('.vbox-next').click(function(){
                  gallnav.next();
                });
                
                /* -------- ESCAPE HANDLER -------- */
                function escapeHandler(e) {
                  if(e.keyCode === 27) {
                    closeVbox();
                  }
                }

                /* -------- CLOSE VBOX -------- */

                function closeVbox(){
                  
                  $('body').unbind('keydown', escapeHandler);

                  if (ie9) {

                    overlay.animate({opacity:0}, 500, function(){
                      overlay.remove();
                      $('.vwrap').children().unwrap();
                      $(window).scrollTop(-top);
                      keyNavigationDisabled = false;
                      obj.focus();
                    });

                  } else {

                    overlay.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
                    overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

                      // Check if transition is on the overlay - thanx @kanduvisla
                      if( e.target != e.currentTarget ) {
                        return;
                      }

                      overlay.remove();
                      if (ios) {
                        $('.vwrap').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
                          $('.vwrap').children().unwrap();
                          $(window).scrollTop(-top);
                        });
                        $('.vwrap').css('opacity', '1');
                      }else{
                        $('.vwrap').children().unwrap();
                        $(window).scrollTop(-top);
                      }
                      keyNavigationDisabled = false;
                      obj.focus();
                    });
                    overlay.css('opacity', '0');
                  }
                }

                /* -------- CLOSE CLICK -------- */
                var closeclickclass = '.vbox-close, .vbox-overlay';
                if(!obj.data('overlayclose')){
                    closeclickclass = '.vbox-close';    // close only on X
                }

                $(closeclickclass).click(function(e){
                  evitacontent = '.figlio';
                  evitaprev = '.vbox-prev';
                  evitanext = '.vbox-next';
                  figliall = '.figlio *';
                  if(!$(e.target).is(evitacontent) && !$(e.target).is(evitanext) && !$(e.target).is(evitaprev)&& !$(e.target).is(figliall)){
                    closeVbox();
                  }
                });
                $('body').keydown(escapeHandler);
                return false;
              });
        });
    }
});

/* -------- LOAD AJAX -------- */
function loadAjax(){
  $.ajax({
  url: dest,
  cache: false
  }).done(function( msg ) {
      content.html('<div class="vbox-inline">'+ msg +'</div>');
      updateoverlay(true);

  }).fail(function() {
      content.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>');
      updateoverlay(true);
  })
}

/* -------- LOAD IFRAME -------- */
function loadIframe(){
  content.html('<iframe class="venoframe" src="'+dest+'"></iframe>');
//  $('.venoframe').load(function(){ // valid only for iFrames in same domain
  updateoverlay();
//  });
}

/* -------- LOAD VIMEO -------- */
function loadVimeo(){
  var pezzi = dest.split('/');
  var videoid = pezzi[pezzi.length-1];
  content.html('<iframe class="venoframe" src="//player.vimeo.com/video/'+videoid+'"></iframe>');
  updateoverlay();
}

/* -------- LOAD YOUTUBE -------- */
function loadYoutube(){
  var pezzi = dest.split('/');
  var videoid = pezzi[pezzi.length-1];
  content.html('<iframe class="venoframe" allowfullscreen src="//www.youtube.com/embed/'+videoid+'"></iframe>');
  updateoverlay();
}

/* -------- LOAD INLINE -------- */
function loadInline(){
  content.html('<div class="vbox-inline">'+$(dest).html()+'</div>');
  updateoverlay();
}

/* -------- PRELOAD IMAGE -------- */
function preloadFirst(){
    prima = $('.vbox-content').find('img');
    prima.one('load', function() {
      updateoverlay();
    }).each(function() {
      if(this.complete) $(this).load();
    });
}

/* -------- CENTER ON LOAD -------- */
function updateoverlay(notopzero){
  notopzero = notopzero || false;
  if (notopzero != true) {
    $(window).scrollTop(0);
  }

  blocktitle.html(title);
  content.find(">:first-child").addClass('figlio');
  $('.figlio').css('width', framewidth).css('height', frameheight).css('padding', border).css('background', bgcolor);

  sonH = content.outerHeight();
  finH = $(window).height();

  if(sonH+80 < finH){
    margine = (finH - sonH)/2;
    content.css('margin-top', margine);
    content.css('margin-bottom', margine);

  }else{
    content.css('margin-top', '40px');
    content.css('margin-bottom', '40px');
  }
  content.animate({
    'opacity': '1'
  },'slow');
}

/* -------- CENTER ON RESIZE -------- */
function updateoverlayresize(){
  if($('.vbox-content').length){
    sonH = content.height();
    finH = $(window).height();

    if(sonH+80 < finH){
      margine = (finH - sonH)/2;
      content.css('margin-top', margine);
      content.css('margin-bottom', margine);

    }else{
      content.css('margin-top', '40px');
      content.css('margin-bottom', '40px');
    }
  }
}

$(window).resize(function(){
  updateoverlayresize();
});

})(jQuery);

Formatting. Tags: +'lightbox'
ソース リンク
Hiroshi Yamamoto
  • 6,349
  • 14
  • 32
読み込んでいます
ソース リンク
読み込んでいます