Making "Facebook Photo Viewer" con Fancybox 2

Question

http://xinhsangchanh.com/demos/FancyBoxDemo.html

Questa è la mia pagina demo mostrano come fare "Facebook Photo Viewer" con Fancybox 2

jQuery & Fancybox 2

<script src="http://xinhsangchanh.com/Scripts/jquery/js/jquery.js"></script> 
<script src="http://xinhsangchanh.com/Scripts/fancybox/jquery.fancybox.pack.js"></script> 
<link href="http://xinhsangchanh.com/Scripts/fancybox/jquery.fancybox.css" rel="stylesheet" /> 

CSS

<link href="http://xinhsangchanh.com/App_Themes/Web/css/global.css" rel="stylesheet" /> 

Facebook API

<script type="text/javascript"> 
    (function (d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=339062419468905"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

Javascript fare "Facebook Photo Viewer"

<script type="text/javascript"> 
    var mainUrl = location.href; 
    var photoDetailUrl; 
    var fancyBoxIsOpen = false; 
    var isChrome = window.chrome; 
    var is_fullscreen = false; 
    var is_ff = function() { return (/Firefox/).test(navigator.userAgent); }; 
    var is_chrome = window.chrome; 
    var is_opera = window.opera; 
    var is_safari = navigator.userAgent.indexOf("Safari") > -1; 
    if ((is_chrome) && (is_safari)) { is_safari = false; } 

    /* Full Screen API */ 
    function exitFullScreen(mainUrl, photoDetailUrl) { 
     if (document.cancelFullScreen) { 
      document.cancelFullScreen(); 
     } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
     } else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
     } 

     if (isChrome) { 
      //push url for the main page 
      history.pushState('', '', mainUrl); 

      //push url for the page in the popup 
      history.pushState('', '', photoDetailUrl); 
     } 
    } 

    function enterFullScreen(mainUrl, photoDetailUrl) { 
     if (document.documentElement.requestFullscreen) { 
      document.documentElement.requestFullscreen(); 
     } else if (document.documentElement.mozRequestFullScreen) { 
      document.documentElement.mozRequestFullScreen(); 
     } else if (document.documentElement.webkitRequestFullscreen) { 
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
     } 

     if (!isChrome) { 
      //push url for the main page 
      history.pushState('', '', mainUrl); 

      //push url for the page in the popup 
      history.pushState('', '', photoDetailUrl); 
     } 
    } 

    function toggleFullScreen(mainUrl, photoDetailUrl) { 
     if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { 
      is_fullscreen = true; 
      enterFullScreen(mainUrl, photoDetailUrl); 
     } else { 
      is_fullscreen = false; 
      exitFullScreen(mainUrl, photoDetailUrl); 
     } 
    } 
    /* END Full Screen API */ 

    function InitFancyBox() { 
     $(".fancybox").attr('rel', 'gallery').fancybox({ 
      width: '100%', 
      height: '100%', 
      padding: 0, 
      margin: 0, 
      nextEffect: 'fade', 
      prevEffect: 'fade', 
      openEffect: 'none', 
      closeEffect: 'none', 
      autoCenter: true, 
      autoSize: false, 
      aspectRatio: false, 
      afterLoad: function() { 
       var owner = $(this.element).attr('data-t'); 
       var pid = $(this.element).attr('data-pid'); 
       var albumUrl = $(this.element).attr('data-aurl'); 
       var albumName = $(this.element).attr('data-aname'); 
       var caption = $('#fancybox-caption-' + pid).html(); 
       photoDetailUrl = albumUrl; 

       // PUSH STATE 
       if (history.pushState && history.replaceState) { 

        if (!isChrome) { 
         //push url for the main page 
         history.pushState(null, null, mainUrl); 

         //push url for the page in the popup 
         history.pushState(null, null, photoDetailUrl); 
        } 
        else if (isChrome && !is_fullscreen) { 
         //push url for the main page 
         history.pushState(null, null, mainUrl); 

         //push url for the page in the popup 
         history.pushState(null, null, photoDetailUrl); 
        } 

        //this executes when you use the back button 
        window.onpopstate = function() { 
         $.fancybox.close(); 
        }; 
       } 

       var isFullscreen = ((typeof document.webkitIsFullScreen) !== 'undefined') ? document.webkitIsFullScreen : document.mozFullScreen; 
       var paddingCss = is_ff ? (isFullscreen ? "padding-right: 0;" : "padding-right: 333px;") : 
        (is_fullscreen ? "padding-right: 0;" : "padding-right: 333px;"); 

       var html = "<div class='photo-viewer-wrapper' style='" + paddingCss + " height:100%; overflow: hidden;'>"; 

       html += "<div class='photo-viewer-image' style='float: left; width: 100%; display: block;'>"; 
       html += "<img src='" + this.href + "' alt='' />"; 

       if (!is_safari) { 
        html += "<div class='fullScreenSwitch' id='fullScreenSwitch'><a href='javascript:;' onclick=\"toggleFullScreen('" + mainUrl + "', '" + photoDetailUrl + "'); ResizeFancyBox(); return false;\" title='Enter Fullscreen'></a></div>"; 
       } 

       html += "<div class='mediaTitleInfo'>"; 
       html += "<span><a href='" + albumUrl + "'>" + albumName + "</a></span>"; 
       html += "<span class='photo_count'>" + (this.index + 1) + " of " + this.group.length + "</span>"; 
       html += "<span class='photo_download'><a href='" + this.href + "?dl=1'>Download</a></span>"; 

       if (!is_safari) { 
        html += "<span class='fullscreen_button'><a href='javascript:;' onclick=\"toggleFullScreen('" + mainUrl + "', '" + photoDetailUrl + "'); ResizeFancyBox(); return false;\">Enter Full Screen</a></span>"; 
       } 

       html += "</div>"; /* END mediaTitleInfo */ 

       html += "<a class='btnPrev' onclick='$.fancybox.prev();'></a>"; 
       html += "<a class='btnNext' onclick='$.fancybox.next();'></a>"; 
       html += "</div>"; /* END photo-viewer-image */ 

       var cssDisplay = !is_ff 
         ? (is_fullscreen ? "display: none;" : "display: block;") 
         : (isFullscreen ? "display: none;" : "display: block;"); 

       html += "<div class='photo-view-info' style='float: left; width: 333px; margin-right: -333px; " + cssDisplay + "'>"; 

       /* Close Button */ 
       html += "<a id='myFancyCloseButton' style='" + cssDisplay + "' title='Press Esc to close' href='javascript:;' onclick='$.fancybox.close();'></a>"; 

       // Person info, you can load ajax here 
       html += "<div class='person-info' id='person_" + owner + "'>"; 
       html += "<div class='person-container'>"; 
       html += "<div class='person-image'><a href='#'><img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-frc3/373319_159983480792077_2067967797_t.jpg' alt='Xinh - Sang - Chảnh'></a></div>"; 
       html += "<div class='person-name'><a href='#'>Xinh - Sang - Chảnh</a></div>"; 
       html += "<div class='date-posted'>Friday, November 15, 2013</div>"; 
       html += "</div>"; // end person-container 
       html += "<div class='c10'></div>"; 

       /* Facebook Like - Captions - Comments */ 
       html += "<div class='facebook_like_buttons'>"; 
       html += "<div class='fb-like' data-href='" + photoDetailUrl + "' data-layout='standard' data-action='like' data-show-faces='true' data-share='false'></div>"; 
       html += "</div>"; // end facebook_like_buttons 
       if (caption.length > 0) html += "<div class='person-caption'>" + caption + "</div>"; 
       html += "<div class='highslide_fbcomment'><fb:comments href='" + photoDetailUrl + "' num_posts='5' width='320' publish_feed='true' xid='id" + pid + "'></fb:comments></div>"; 
       /* END Facebook Like - Captions - Comments */ 

       html += "</div>"; /* END person-info */ 

       html += "</div>"; /* END photo-view-info */ 
       html += "<div class='clear'></div>"; 
       html += "</div>"; /* END photo-viewer-wrapper' */ 

       var widthPercent = is_safari ? "95%" : "85%"; 
       var heightPercent = is_safari ? "95%" : "85%"; 

       $.extend(this, { 
        aspectRatio: false, 
        type: 'html', 
        width: widthPercent, 
        height: heightPercent, 
        content: html 
       }); 
      }, 
      beforeShow: function() { 
       try { 
        // ReSharper disable UseOfImplicitGlobalInFunctionScope 
        FB.XFBML.parse(); 
        // ReSharper restore UseOfImplicitGlobalInFunctionScope 
       } catch (e) { 

       } 
      }, 
      afterShow: function() { 
       fancyBoxIsOpen = true; 
      }, 
      beforeClose: function() { 
       fancyBoxIsOpen = false; 

       window.history.pushState('', '', mainUrl); 

       exitFullScreen(); 
      } 
     }); 
    } 

    function ResizeFancyBox_RemoveFullScreen() { 
     $('.photo-view-info, .fancybox-close').css({ 
      display: 'block', 
     }); 

     $('.photo-viewer-wrapper').css({ 
      'padding-right': '333px', 
     }); 

     $('html').removeClass('fancybox-fullscreen'); 
    } 

    function ResizeFancyBox() { 
     if (is_fullscreen) { 
      $('.photo-view-info, .fancybox-close').css({ 
       display: 'none', 
      }); 

      $('.photo-viewer-wrapper').css({ 
       'padding-right': '0', 
      }); 

      $('html').addClass('fancybox-fullscreen'); 
     } else { 
      ResizeFancyBox_RemoveFullScreen(); 
     } 

     $.fancybox.update(); 
     $.fancybox.reposition(); 
    } 

    $(document).ready(function() { 
     InitFancyBox(); 

     $(document).bind("fullscreenerror", function() { 
      alert("Browser rejected fullscreen change"); 
     }); 

     $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() { 
      var isFullscreen = ((typeof document.webkitIsFullScreen) !== 'undefined') ? document.webkitIsFullScreen : document.mozFullScreen; 
      if (is_ff && !isFullscreen) { 
       ResizeFancyBox_RemoveFullScreen(); 
       $.fancybox.update(); 
       $.fancybox.reposition(); 
      } 
     }); 

     $(document).on('keyup', function (e) { 
      if (e.keyCode == 27) { 
       if (is_fullscreen) { 
        /* FixBugs Chrome FullScreen with history.PushState */ 
        if (isChrome) { 
         //push url for the main page 
         history.pushState('', '', mainUrl); 

         //push url for the page in the popup 
         history.pushState('', '', photoDetailUrl); 
        } 

        is_fullscreen = false; 
       } 

       /* Resize FancyBox */ 
       if (fancyBoxIsOpen) { 
        ResizeFancyBox(); 
       } 
      } 
     }); 
    });; 
</script> 

HTML

<div id="fb-root"></div> 
<div class="wrapper"> 
    <a data-pid="1" data-aurl="http://xinhsangchanh.com/pages/model.ngoctrinh89/photos_albums/534945013187112_1073741870/c-t-thoi-trang-cuoc-song/" data-aname="C&T - Thời Trang&Cuộc Sống" class="fancybox" 
     href="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-frc3/a920x920/1395393_742419162439695_1843666743_o.jpg"> 
     <img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-frc3/s720x720/1395393_742419162439695_1843666743_n.jpg" alt="" /> 
     <div class="fancybox-caption" id="fancybox-caption-1"> 
      Description image 1 
     </div> 
    </a> 
    <a data-pid="2" data-aurl="http://xinhsangchanh.com/pages/xinhsangchanh/photos_albums/159983480792077_1073741861/co-dai/" data-aname="♥ Cỏ Dại ♥" class="fancybox" 
     href="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash4/a920x920/1452326_225031824287242_634947362_o.jpg"> 
     <img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash4/s720x720/1452326_225031824287242_634947362_n.jpg" alt="" /> 
     <div class="fancybox-caption" id="fancybox-caption-2"> 
      Description image 2 
     </div> 
    </a> 
    <a data-pid="3" data-aurl="http://xinhsangchanh.com/pages/xinhsangchanh/photos_albums/159983480792077_1073741856/si-thanh/" data-aname="♥ Sĩ Thanh ♥" class="fancybox" 
     href="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn2/a920x920/1463654_224327864357638_843264111_o.jpg"> 
     <img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn2/s720x720/1463654_224327864357638_843264111_n.jpg" alt="" /> 
     <div class="fancybox-caption" id="fancybox-caption-3"> 
      Description image 3 
     </div> 
    </a> 
    <a data-pid="4" data-aurl="http://xinhsangchanh.com/pages/xinhsangchanh/photos_albums/159983480792077_6930/phuong-ltf/" data-aname="♥ Phương Ltf ♥" class="fancybox" 
     href="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash4/a920x920/1424263_225004224290002_1852999001_o.jpg"> 
     <img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash4/s720x720/1424263_225004224290002_1852999001_n.jpg" alt="" /> 
     <div class="fancybox-caption" id="fancybox-caption-4"> 
      Description image 4 
     </div> 
    </a> 
    <a data-pid="5" data-aurl="http://xinhsangchanh.com/pages/xinhsangchanh/photos_albums/159983480792077_1073741859/linh-pham/" data-aname="♥ Linh Phạm ♥" class="fancybox" 
     href="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/a920x920/1476303_224794277644330_557943496_o.jpg"> 
     <img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/s720x720/1476303_224794277644330_557943496_n.jpg" alt="" /> 
     <div class="fancybox-caption" id="fancybox-caption-5"> 
      Description image 5 
     </div> 
    </a> 
</div> 

E si può vedere e vie w full source at my Demo Pagina: http://xinhsangchanh.com/demos/FancyBoxDemo.html

Answer 1

C'è un modo più semplice per farlo.

1- add padding a destra del vostro fancybox

2- contenuti inserto a $ .fancybox.inner e position: absolute, a destra: minusTheSizeOfTheInsertedContent

$(".fancybox-thumb").fancybox({ 
    padding  : [15, 325, 15, 15], 
    nextEffect : 'fade', 
    prevEffect : 'fade', 
    autoSize : true, 
    beforeShow: function(){ 
      var fancyNewContent = $('<div class="fancybox-New"></div>'); 
      this.inner.append(fancyNewContent); 
    } 
}); 

nel file css:

.fancybox-New{ 
    position: absolute; 
    right: -310px; 
    width: 300px; 
    height: 250px; 
    background-color: #ccc; 
} 

Ho usato questo metodo per aggiungere annunci.