Jquery 制造；Facebook照片查看器“；使用Fancybox 2
这是我的演示页面，演示如何使用Fancybox 2制作“Facebook照片查看器” jQuery&Fancybox 2Jquery 制造；Facebook照片查看器“；使用Fancybox 2,jquery,facebook,fancybox-2,facebook-comments,Jquery,Facebook,Fancybox 2,Facebook Comments,这是我的演示页面，演示如何使用Fancybox 2制作“Facebook照片查看器” 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>
<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" />
<link href="http://xinhsangchanh.com/App_Themes/Web/css/global.css" rel="stylesheet" />
<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>
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/all.js#xfbml=1&appId=339062419468905”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
var mainUrl=location.href；
var光电探测器；
var fancyBoxIsOpen=假；
var isChrome=window.chrome；
var为_全屏=假；
var是函数（）{return（/Firefox/）.test（navigator.userAgent）；}；
var是_chrome=window.chrome；
var是_opera=window.opera；
var是_safari=navigator.userAgent.indexOf（“safari”）>-1；
如果（（is_chrome）&&（is_safari））{is_safari=false；}
/*全屏API*/
函数exitFullScreen（mainUrl、photoDetailUrl）{
如果（文档取消全屏）{
document.cancelFullScreen（）；
}else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}else if（document.webkitcancelfillscreen）{
document.webkitcancelfulscreen（）；
}
if（变色）{
//推送主页的url
history.pushState（“”，，，mainUrl）；
//在弹出窗口中推送页面的url
历史。pushState（''，''，photoDetailUrl）；
}
}
函数输入全屏（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（元素.允许键盘输入）；
}
如果（！异色）{
//推送主页的url
history.pushState（“”，，，mainUrl）；
//在弹出窗口中推送页面的url
历史。pushState（''，''，photoDetailUrl）；
}
}
功能切换全屏（mainUrl、photoDetailUrl）{
如果（！document.fullscreenElement&&！document.mozFullScreenElement&&！document.webkitFullscreenElement）{
is_fullscreen=true；
输入全屏（mainUrl、photoDetailUrl）；
}否则{
is_fullscreen=false；
exitFullScreen（mainUrl、photoDetailUrl）；
}
}
/*结束全屏API*/
函数InitFancyBox（）{
$（“.fancybox”）.attr（'rel'，'gallery'）.fancybox({
宽度：“100%”，
高度：“100%”，
填充：0，
保证金：0，
下一个效果：“褪色”，
效果：“褪色”，
openEffect:'无'，
closeEffect:'无'，
自动中心：对，
自动调整大小：false，
方面：错误，
后加载：函数（）{
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；
//推送状态
if（history.pushState&&history.replaceState）{
如果（！异色）{
//推送主页的url
pushState（null，null，mainUrl）；
//在弹出窗口中推送页面的url
pushState（null，null，photoDetailUrl）；
}
else if（isChrome&&！全屏显示）{
//推送主页的url
pushState（null，null，mainUrl）；
//在弹出窗口中推送页面的url
pushState（null，null，photoDetailUrl）；
}
//当您使用“后退”按钮时，将执行此操作
window.onpopstate=函数（）{
$.fancybox.close（）；
};
}
var isFullscreen=（（document.webkitisfulscreen的类型）！='undefined'）？document.webkitisfulscreen:document.mozFullScreen；
var paddingCss=is_ff？（isFullscreen？“右键填充：0；”：“右键填充：333px；”）：
（是否全屏？“右键填充：0；”：“右键填充：333px；”；
var html=“”；
html+=“”；
html+=“”；
如果（！is_safari）{
html+=“”；
}
html+=“”；
html+=“”；
html++=“+（this.index+1）+”的“+this.group.length+”；
html+=“”；
如果（！is_safari）{
html+=“”；
}
html+=“”；/*结束媒体标题信息*/
html+=“”；
//个人信息，您可以在这里加载ajax
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“2013年11月15日，星期五”；
html+=“”；//结束人员容器
html+=“”；
/*类似Facebook的-字幕-评论*/
html+=“”；
html+=“”；
html+=“”；//结束类似facebook的按钮
如果（caption.length>0）html+=“”+caption+“”；
<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>
<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>
$(".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);
}
});
.fancybox-New{
position: absolute;
right: -310px;
width: 300px;
height: 250px;
background-color: #ccc;
}