什么是FancyBox？
FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframed内容，通过css自定义外观。
该插件自身提供了不少功能及效果，其特点如下：
- 可以支持图片、html文本、flash动画、iframe以及ajax的支持。
- 可以自定义播放器的CSS样式。
- 可以以组的形式进行播放。
- 如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片。
- Fancybox播放器支持投影，更有立体的感觉。
具体使用方法就不在此阐述了，下面我们要讲的是如何加入旋转图片的效果。这个功能主要用于浏览上传时没有摆正的图片。
实现旋转图片效果
旋转图片，我们首先可以想到的就是利用CSS3 transform的rotate及translate属性，但是IE不支持CSS3新增属性，那么我们此时得使用IE的滤镜方法。那么基本的思路就出来了，首先判断浏览器，然后根据不同的浏览器使用不同的实现方式。
1.为插件增加旋转按钮
需要改动 jquery.fancybox-buttons.js和jquery.fancybox-buttons.css
query.fancybox-buttons.css修改
#fancybox-buttons a.btnRotateL {
background-position: 5px 0;
}
#fancybox-buttons a.btnRotateR {
background-position: -33px 0;
border-right: 1px solid #3e3e3e;
}
//修改#fancybox-buttons ul中的width属性
jquery.fancybox-buttons.js修改
F.helpers.buttons = {
defaults : {
skipSingle : false, // disables if gallery contains single image
position : 'top', // 'top' or 'bottom'
tpl : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:;"></a></li></ul></div>'
}
/**增加下边的旋转按钮*/
<li><a class="btnRotateL" title="left" href="javascript:;"></a></li><li><a class="btnRotateR" title="right" href="javascript:;"></a></li>
afterShow: function (opts, obj) {
var buttons = this.buttons;
if (!buttons) {
this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
buttons = {
prev : this.list.find('.btnPrev').click( F.prev ),
next : this.list.find('.btnNext').click( F.next ),
play : this.list.find('.btnPlay').click( F.play ),
toggle : this.list.find('.btnToggle').click( F.toggle ),
close : this.list.find('.btnClose').click( F.close ),
rotateL : this.list.find('.btnRotateL').click( F.rotateL ),//增加左转单击事件
rotateR : this.list.find('.btnRotateR').click( F.rotateR )//增加右转单击事件
}
}
//Prev
if (obj.index > 0 || obj.loop) {
buttons.prev.removeClass('btnDisabled');
} else {
buttons.prev.addClass('btnDisabled');
}
//Next / Play
if (obj.loop || obj.index < obj.group.length - 1) {
buttons.next.removeClass('btnDisabled');
buttons.play.removeClass('btnDisabled');
} else {
buttons.next.addClass('btnDisabled');
buttons.play.addClass('btnDisabled');
}
this.buttons = buttons;
this.onUpdate(opts, obj);
}
2.修改jquery.fancybox.js
为div增加id
// HTML templates
tpl: {
wrap : '<div id="fancybox-wrap" class="fancybox-wrap" tabIndex="-1"><div id="fancybox-skin" class="fancybox-skin"><div id="fancybox-outer" class="fancybox-outer"><div id="fancybox-content" class="fancybox-inner"></div></div></div></div>',
image : '<img id="fancybox-img" class="fancybox-image" src="{href}" alt="" />',
iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>',
error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
}
增加旋转相关的js函数
定义全局rad变量，用于赋值旋转的角度
rotateL : function(){
var f_w = $("#fancybox-content").width();
var f_h = $("#fancybox-content").height();
var translate = (f_h - f_w)/2;
rad=rad-90;
if(rad==-360){
rad = 0;
}
//if($.browser.msie){
// if($.browser.version=="7.0"||$.browser.version=="8.0"){
// F.rotIsIE(f_w,f_h,translate);
// }else{
// F.rot(f_w,f_h,translate);
// }
//}else{
// F.rot(f_w,f_h,translate);
//}
F.rot(f_w,f_h,translate);
},
rotateR : function(){
var f_w = $("#fancybox-content").width();
var f_h = $("#fancybox-content").height();
var translate = (f_h - f_w)/2;
rad=rad+90;
if(rad==360){
rad = 0;
}
//if($.browser.msie){
// if($.browser.version=="7.0"||$.browser.version=="8.0"){
// F.rotIsIE(f_w,f_h,translate);
// }else{
// F.rot(f_w,f_h,translate);
// }
//}else{
// F.rot(f_w,f_h,translate);
//}
F.rot(f_w,f_h,translate);
},
rot : function(f_w,f_h,translate){
if(rad/90%2){
$("#fancybox-img").css("-webkit-transform","translate("+(translate-4)+"px,"+(-translate)+"px)"+" rotate("+rad+"deg)").css("-moz-transform","translate("+(translate-4)+"px,"+(-translate)+"px)"+" rotate("+rad+"deg)").css("-o-transform","translate("+(translate-4)+"px,"+(-translate)+"px)"+" rotate("+rad+"deg)").css("-ms-transform","translate("+(translate-4)+"px,"+(-translate)+"px)"+" rotate("+rad+"deg)").css("transform","translate("+(translate-4)+"px,"+(-translate)+"px)"+" rotate("+rad+"deg)");
$("#fancybox-img").height(f_h).width(f_w);
$("#fancybox-content").height(f_w).width(f_h);
$("#fancybox-wrap").width($("#fancybox-content").width()+20);
var left = $("#fancybox-wrap").css("left");
var leftvalue = left.substring(0,left.length - 2);
var tempvalue = ($("#fancybox-content").height()-$("#fancybox-content").width())/2;
var pianyivalue = parseInt(leftvalue) + parseInt(tempvalue);
$("#fancybox-wrap").css("left",pianyivalue+"px");
}else{
$("#fancybox-img").css("-webkit-transform","rotate("+rad+"deg)").css("-moz-transform","rotate("+rad+"deg)").css("-o-transform","rotate("+rad+"deg)").css("-ms-transform","rotate("+rad+"deg)").css("transform","translate(-4px, 0px) rotate("+rad+"deg)");
$("#fancybox-img").height("100%").width("100%");
$("#fancybox-content").height(f_w).width(f_h);
$("#fancybox-wrap").width($("#fancybox-content").width()+20);
var left = $("#fancybox-wrap").css("left");
var leftvalue = left.substring(0,left.length - 2);
var tempvalue = ($("#fancybox-content").height()-$("#fancybox-content").width())/2;
var pianyivalue = parseInt(leftvalue) + parseInt(tempvalue);
$("#fancybox-wrap").css("left",pianyivalue+"px");
}
},
rotIsIE : function (f_w,f_h,translate){
if(rad/90%2){
F.progidIE();
$("#fancybox-img").height(f_h).width(f_w);
$("#fancybox-content").height(f_w).width(f_h);
$("#fancybox-wrap").width($("#fancybox-content").width()+20);
var left = $("#fancybox-wrap").css("left");
var leftvalue = left.substring(0,left.length - 2);
var tempvalue = ($("#fancybox-content").height()-$("#fancybox-content").width())/2;
var pianyivalue = parseInt(leftvalue) + parseInt(tempvalue);
$("#fancybox-wrap").css("left",pianyivalue+"px");
}else{
F.progidIE();
$("#fancybox-img").height("100%").width("100%");
$("#fancybox-content").height(f_w).width(f_h);
$("#fancybox-wrap").width($("#fancybox-content").width()+20);
var left = $("#fancybox-wrap").css("left");
var leftvalue = left.substring(0,left.length - 2);
var tempvalue = ($("#fancybox-content").height()-$("#fancybox-content").width())/2;
var pianyivalue = parseInt(leftvalue) + parseInt(tempvalue);
$("#fancybox-wrap").css("left",pianyivalue+"px");
}
},
progidIE : function(){
alert(rad);
switch(rad/90){
case -3:
$("#fancybox-img").css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=1)");
break;
case -2:
$("#fancybox-img").css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
break;
case -1:
$("#fancybox-img").css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=3)");
break;
case 0:
$("#fancybox-img").css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=0)");
break;
case 1:
$("#fancybox-img").css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=1)");
break;
case 2:
$("#fancybox-img").css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
break;
case 3:
$("#fancybox-img").css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=3)");
break;
}
},
修改next和prev方法
// Navigate to next gallery item
next: function ( direction ) {
var current = F.current;
rad = 0;//加入重置rad值
if (current) {
if (!isString(direction)) {
direction = current.direction.next;
}
F.jumpto(current.index + 1, direction, 'next');
}
},
// Navigate to previous gallery item
prev: function ( direction ) {
var current = F.current;
rad = 0;//加入重置rad值
if (current) {
if (!isString(direction)) {
direction = current.direction.prev;
}
F.jumpto(current.index - 1, direction, 'prev');
}
}
修改jquery.fancybox.css
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
//改为
.fancybox-image {
width: 100%;
height: 100%;
}
完成可以，查看效果了
相关推荐
NULL 博文链接：https://javaxiaoyetan.iteye.com/blog/2210464
fancyBox图片预览插件 可以实现上一张 下一张 多级放大
jquery fancybox图片放大插件
点击图片弹出大图，可以以组的方式左右轮播，点击遮罩关闭。
这种效果多见于一些网页相册中，看上去比较不错的效果，小图片点击后显示大图片，大图片右上角可关闭，这里使用的是一个有名的jquery插件：jquery.fancybox.js这个插件的效果和另一款著名的图片放大显示插件LightBox...
使用jQuery插件FancyBox轻松实现弹窗视频，使用jQuery插件FancyBox轻松实现弹窗视频
此插件是建立在著名的javascript框架JQuery
fancybox v1.3.4 jQ插件是一款优秀的jquery插件，它能够展示丰富的弹出层效果。
fancybox 图片轮转显示
在asp.net mvc中利用fancyBox图片展示
prettyPhoto和fancybox弹出层插件对比
jquery+fancybox图片切换特效， ${path}/js/fancybox/css/global.css" rel="stylesheet" type="text/css"> ${path}/js/fancybox/css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css"> ...
FancyBox是一款基于 jquery 开发的类 Lightbox 插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该 lightbox 除了能够展示图片之外，还可以展示 iframed 内容，通过 css 实现自定义外观
原生jQuery-fancybox不支持Base64的图片，改资源已经过改造，支持Base64格式图片（需要满足正则【data:image\/.*,】的前缀以识别Base64编码），但对IE8支持不好。
基于jQuery的图片点击弹窗预览大图插件
jquery fancybox弹出层插件支持Ajax,ifram jquery fancybox弹出层插件支持Ajax,ifram jquery fancybox弹出层插件支持Ajax,ifram jquery fancybox弹出层插件支持Ajax,ifram
内容索引:脚本资源,jQuery,fancybox,图片盒子,灯箱 jQuery制作带阴影的fancybox图片灯箱效果，不知大家记得LightBox、FancyBox吗？它们有着一个漂亮的外观，有着舒服的动画效果体验，用来展现图片非常棒，有人称其...
本文给大家分享的是使用使用JQuery FancyBox插件实现图片展示的3种风格的特效，非常的简单实用，有需要的小伙伴可以查看下
<script type="text/javascript" src="js/jquery.fancybox.js"> /* optional */ <script type="text/javascript" src="js/jquery.pngFix.js"> <script type="text/javascript" src="js/jquery.metadata.js"> -------...