什么是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%;
}
完成可以，查看效果了
相关推荐
**jQuery Fancybox 图片旋转功能实现详解** 在网页中展示图片时，我们有时需要提供一些增强用户体验的功能，比如图片预览、放大查看以及旋转。...希望这个教程对你在构建交互性更强的网页图片展示体验时有所帮助。
例如，Lightbox、Fancybox和Swiper等插件可以快速实现高质量的图片展示效果。 7. **自定义动画**：对于追求独特性的开发者，他们可能选择编写自定义动画，比如3D旋转、粒子效果等，使图片展示更加独特和引人注目。 ...
本文将深入探讨标题"10款让你震撼的图片展示js代码"所涉及的知识点，以及如何利用JavaScript (js) 和 CSS (css) 进行网页美化。 1. JavaScript 图片展示库： JavaScript 作为一种强大的客户端脚本语言，可以实现...
jQuery.artZoom是一款优秀的JavaScript插件，它提供了图片旋转和放大的功能，使得用户可以更加直观、细致地查看图片，极大地提升了用户体验。 ### 一、jQuery.artZoom基本概念 jQuery.artZoom插件基于流行的jQuery...
5. 图片旋转：支持90度旋转图片，方便调整方向。 6. 图片下载：允许用户下载喜欢的图片。 7. 图片分享：提供社交媒体分享按钮，便于用户分享图片。 二、技术实现 1. HTML5：HTML5的`<img>`标签配合`data-*`属性可以...
综上所述，jQuery图片浏览插件是提升网站或应用图片展示体验的重要工具，它们充分利用jQuery的便利性和灵活性，实现了丰富的功能和优秀的用户体验。通过选择合适的插件并进行适当的配置，你可以轻松地在自己的项目中...
"js图片查看器"是一种基于JavaScript技术实现的用于在网页中查看和浏览图片的应用程序。JavaScript，简称JS，是Web开发中的主要脚本语言，它允许开发者在用户浏览器上动态处理内容，包括图像的显示、缩放、旋转等...
在实际项目中，你可以找到许多成熟的jQuery图片插件，如Fancybox、Magnific Popup、Cropper.js等，它们提供了详细的文档和示例代码，方便开发者快速集成到自己的项目中。 总之，jQuery图片插件是提高网页图片互动...
jQuery插件库是Web开发中一个非常重要的资源集合，它为开发者提供了丰富的功能扩展，使得使用JavaScript库jQuery进行网页交互和动态效果实现变得更加便捷。jQuery以其简洁的API和强大的功能深受开发者喜爱，而jQuery...
2. **CSS3 动画**：CSS3的引入极大地扩展了网页设计的可能性，提供了多种动画和过渡效果，如旋转、缩放、平移等，无需JavaScript也能实现丰富的图片特效。 3. **WebGL**：对于3D图像和复杂动画，WebGL是一个强大的...
44. **Gridalicious**：基于Masonry的瀑布流布局插件，适用于图片展示。 45. **Scrollorama**：基于scroll事件的动画插件，可实现复杂的滚动触发效果。 46. **jScrollPane**：自定义滚动条的插件，提供更优雅的...
Imagebox是一个轻量级的图片展示插件，可以实现弹出式大图预览、缩略图导航等功能，常用于产品展示或相册应用。 8. **jquery表单验证插件formValidator3.1下载.rar**： 表单验证是网页中必不可少的功能，这个插件...
5. **图像特效**：jQuery可以添加各种过渡和动画效果，比如淡入淡出、旋转、翻转等，使得图片展示更加生动有趣。 6. **图库和画廊**：可能提到了Fancybox、Lightbox等插件，用于创建美观的图像画廊，支持缩略图导航...
首先，jQuery相册浏览效果的核心在于利用jQuery的动态效果和事件监听功能，为用户提供高度互动且视觉吸引人的图片展示体验。这些效果通常包括平滑的图片切换、过渡动画、缩放、旋转、淡入淡出等多种视觉特效，极大地...
例如，Fancybox和Magnific Popup都是优秀的jQuery图片查看器插件，支持多种媒体类型，包括图片、视频等。 最后是图片筛选功能，这在电商网站或图库应用中尤其重要。通过jQuery，我们可以实现根据标签、类别或关键词...
`jquery.fancybox.js`和`owl.carousel.min.js`等JavaScript文件未在提供的列表中，但它们通常是与上述CSS文件对应的JavaScript库，负责实现交互功能和动态效果。jQuery是一个广泛使用的JavaScript库，简化了DOM操作...
jQuery Lightbox插件是网页设计中用于展示图片和多媒体内容的一种流行方式，它通常以弹出窗口的形式出现，提供了一种优雅且用户友好的浏览体验。以下是对这些插件及其功能的详细介绍： 1. **jQuery LightBox**：...
此外，模板可能包含了一个或多个JavaScript插件，如Lightbox或Fancybox，它们能够实现图片预览、幻灯片展示等功能，进一步提升相册的互动性。这些插件通常基于HTML5的Canvas或Video元素，能够实现高清图像展示和视频...