8

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

This is my demo page show how to making "Facebook Photo Viewer" with 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 making "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>

And you can see and view full source at my Demo Page: http://xinhsangchanh.com/demos/FancyBoxDemo.html

4
  • So what's the question ?
    – Sankar V
    Nov 25, 2013 at 7:20
  • this is sharing, not a question :) Sorry, I'm a newbie and don't know how to make this topic with type "share or solved"
    – VnDevil
    Nov 25, 2013 at 7:24
  • That's nice, but you should have posted it as question and answer.
    – Sankar V
    Nov 25, 2013 at 7:30
  • but I dont have 10 reputation to answer my question by my self :)
    – VnDevil
    Nov 25, 2013 at 10:56

1 Answer 1

4

There's a simpler way to do that.

1- add padding to the right of your fancybox

2- insert content to $.fancybox.inner and position: absolute, right: 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);
     }
});

in the css file:

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

I've used this method to add Ads.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.