Menu
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
373
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.
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
