jQuery Fancybox插件使用参数详解

最新推荐文章于 2024-01-11 10:26:31 发布
最新推荐文章于 2024-01-11 10:26:31 发布
阅读量5.4k 收藏
点赞数
分类专栏： 前端js 文章标签： JavaScript 图片 动画 插件

今天给大家介绍的jquery图片播放插件叫Fancybox，相比LightBox来说，Fancybox相对庞大点，配置也更丰富一些，相信你会喜欢的。

Fancybox的项目主页地址：http://fancybox.net/


项目使用列：<#global path = request.getContextPath()>
<script type="text/javascript" src="${path}/js/requesturl/Requesturl.js"></script>
<script type="text/javascript" src="${path}/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="${path}/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="${path}/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
//展开收起
$(".imgchange").click(function(){
if($(this).attr("src")=="${path}/images/sc_open.png"){
$(this).parent().parent().find(".ad-gallery").show();
$(this).attr("src","${path}/images/sc_close.png");
}else{
$(this).parent().parent().find(".ad-gallery").hide();
$(this).attr("src","${path}/images/sc_open.png");
}
})

/*
*上传组件初始化
*/
function initUploadComp(select,template,needFlag,divId){
template=$("#"+template);
if(select=="" || select==undefined){
        select="uploadify";
        }
$("#"+select).uploadify({
        'swf'         : '${path}/js/uploadify/uploadify.swf', //是组件自带的flash，用于打开选取本地文件的按钮    
        //'width'          : 120,
       // 'height'         : 30,
        'uploader'         : '${path}/uploadAction!uploadFiles.action',//处理上传的路径，这里使用Struts2是XXX.action    
        'fileObjName'   : 'uploadify',//和input的name属性值保持一致就好，Struts2就能处理了   
        'queueID'         : 'fileQueue_'+template.attr("filetype"),   
        'auto'           : true,//是否选取文件后自动上传   
        'multi'           : true,//是否支持多文件上传   
        'queueSizeLimit'   : 10, //上传队列最大数目
        'buttonText'     : '上传扫描件',//按钮上的文字   
        'displayData'     : 'speed',//有speed和percentage两种，一个显示速度，一个显示完成百分比    
          'fileTypeDesc'   : '支持格式:jpg/jpeg/png/bmp/txt/doc/docx/pdf.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的    
        'fileTypeExts'   : '*.jpg;*.jpeg;*.png;*.bmp;*.txt;*.doc;*.docx;*.pdf',//允许的格式  
        'fileSizeLimit'    : '2000KB',
       // 'buttonImage'    : '${path}/js/uploadify/${path}/images/up.gif', //自定义图片
       // 'formData'         : {'filetype' : '日本','dataid':$("#imgobj").attr("dataid")},//传递参数
       
        'onSelect':function(e, queueId, fileObj) {//选择文件时触发，该函数有三个参数
            $("#queueCompleteFlag").val("0");
        },
        'onQueueComplete':function(queueData) {//当序列中所有的文件上传完成调用方法
            //alert(queueData.uploadsSuccessful + ' files were successfully  uploaded.');
            $("#queueCompleteFlag").val("1");
        },
        'onUploadSuccess' : function (file, data, response){
        var jsonres=eval('('+data+')');
           if(jsonres["succesflag"]=="success"){
            $("#imgobj").attr("dataid",jsonres["dataid"])
            //alert("【"+file.name+"】文件上传成功!"+jsonres["dataid"]);
            var filename=file.name;
var fileExt=(/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : '';
            if(filename.length>10){
            filename=filename.substring(0,8)+"...";
            }
            if(fileExt=="doc"||fileExt=="pdf"||fileExt=="docx"||fileExt=="txt"){
                var imgtemplate='<li id="'+jsonres["dataid"]+'"><a class="downloadnotimg"  href="'+apachepath+"/"+jsonres["filepath"]+'"><img style="width:110px;height:69px" src="${path}/images/mark.jpg" class="image0 '+jsonres["dataid"]+'"></a><p title="'+file.name+'">'+filename+'</p></a><img  dataid="'+jsonres["dataid"]+'" id="'+jsonres["dataid"]+'" src="${path}/js/adgallery/ad_closed.png" class="closed" title="删除" οnclick="" /></li>';
            }else{
            var imgtemplate='<li id="'+jsonres["dataid"]+'"><a class="fileImg"  href="'+apachepath+"/"+jsonres["filepath"]+'"><img style="width:110px;height:69px" src="'+apachepath+"/"+jsonres["scaleImagefilepath"]+'" class="image0 '+jsonres["dataid"]+'"></a><p title="'+file.name+'">'+filename+'</p></a><img  dataid="'+jsonres["dataid"]+'" id="'+jsonres["dataid"]+'" src="${path}/js/adgallery/ad_closed.png" class="closed" title="删除" οnclick="" /></li>';
            }            
            template.find("#default").remove()
            template.find(".ad-thumb-list").append(imgtemplate);
            changeImg(template);
            delImg(jsonres["dataid"],template,"",needFlag,divId);
//alert("needFlag=="+needFlag+"   divId==="+divId+"   queueCompleteFlag=="+$("#queueCompleteFlag").val());
          //给图片类型附近注册单击事件
          $("a.fileImg").fancybox();
      //给非图片标签注册单击不响应的事件
      downloadnotimgClick(divId);
            rushintofileinfo(template.attr("id"),template.attr("filetypename"),"del");
           
           }else{
            alert("【"+file.name+"】文件上传失败,请重试或者系统管理员联系!");
           }
        },
        'onUploadError'    : function(file, errorCode, errorMsg, errorString) {
            //alert('文件' + file.name + ' 不能够被上传: ' + errorString);
        },
        'onUploadStart' : function(file) {
        if($("#businessdataid").val()=="" || $("#businessdataid").val()==undefined){
        alert("请先保存相关基本信息！");
        $('#'+select).uploadify('cancel', '*');
        return;
        }
       
        $("#"+select).uploadify('settings','formData',{'filetype' : template.attr("filetype"),'dataid':$("#imgobj").attr("dataid"),'basebusinessuuid':$("#basebusinessuuid").val(),'businessdataid' : $("#businessdataid").val(),'relid':$(".button3",parent.document).attr("relid")});
      }
    });
    }
    /*
*给非图片标签注册单击不响应的事件
*/
function downloadnotimgClick(divId){
$("#"+divId).bind('onclick',function(){
        return ;
       });
}
     
   /*
*改变图片显示效果
*/
function changeImg(template){
var galleries = template.find('.ad-gallery').adGallery();
  // $('.thumbwrapper').nailthumb({width:90,height:60});
}

/*
*删除图片
*/
function delImg(obj,template,dleflag){
var dataid="";
if(typeof(obj)=="object"){
dataid=$(obj).attr("dataid");
}else{
dataid=obj;
}
$("#"+dataid).click(function(){
if(this.dataid!=""){
   $.post("${path}/uploadAction!delfiles.action?dataid="+dataid,function(data){
    var jsonres=eval('('+data+')')
    if(jsonres["succesflag"]=="success"){
    $("#"+dataid).remove();
    if(dleflag=="initdel"){
    changeImg($("#"+template));
    }else{
    changeImg(template);
    }
    }else{
    alert("删除失败，请重试或与管理员联系！");
    }
   })
}else{
alert("没有可以删除的图片信息！")
}
});
}
/*
*删除图片
*/
function delImg(obj,template,dleflag){
var dataid="";
if(typeof(obj)=="object"){
dataid=$(obj).attr("dataid");
}else{
dataid=obj;
}
$("#"+dataid).click(function(){
if(this.dataid!=""){
   $.post("${path}/uploadAction!delfiles.action?dataid="+dataid,function(data){
    var jsonres=eval('('+data+')')
    if(jsonres["succesflag"]=="success"){
    $("#"+dataid).remove();
    if(dleflag=="initdel"){
    changeImg($("#"+template));
    }else{
    changeImg(template);
    }
    }else{
    alert("删除失败，请重试或与管理员联系！");
    }
   })
}else{
alert("没有可以删除的图片信息！")
}
});
}

</script>
<input type="hidden" id="queueCompleteFlag" name="queueCompleteFlag" >
   <#--下载非图片文档-->
        <form action="${path}/uploadAction!downLoadFile.action" id="downloadform">
        <input type="hidden" name="filepath" id="filepath">
        </form>
    <#--下载非图片文档结束-->
<#assign apachepath=stack.findValue("@com.ligitalsoft.help.ConfigUtil@getNodeVal('apache_url')")>
<#list subjecinfos as subject>
      <div id="${subject.subCode}" style="" filetype="${subject.subCode}" filetypename="${subject.subName}" needFlag="${subject.needFlag}" class="filetypes">
       <div class="itembox">
         <h1 class="selcet"><img class="imgchange" src="${path}/images/sc_close.png" />
          <strong class="filecaption">${subject.subName}<#if subject.needFlag == "1"><font color="red">*(必须上传)</font></#if></strong>
          <span class="code-text"><b><input type='file' subCode="${subject.subCode}" name='uploadify' id='uploadify${subject_index}' class="uploadify" filetype="${subject.subCode}"/></b></span>
          <script>
          initUploadComp("uploadify${subject_index}","${subject.subCode}","${subject.needFlag}","${subject.subCode}");
          if($.query.get('readonlyflag')=="yes" ||  $("#readonlyflag",parent.parent.document).val()=="yes" ||  $("#readonlyflag").val()=="yes"){//只读状态不能上传
          $("#uploadify${subject_index}").hide();
          }
          $(".uploadify-button-text").each(function(){
$(this).addClass("textadd");
});
          </script>
         </h1>
         <div id="gallery" class="ad-gallery">
          <#if redirect=="bigimg"><#--需要大图显示-->
            <div class="ad-image-wrapper" style=""> </div>
           <#else>
            <div class="ad-image-wrapper" style="display:none"> </div>
           </#if>
           <div class="ad-controls" style="display:none"> </div>
           <div class="ad-nav">
             <div class="ad-thumbs">
               <ul class="ad-thumb-list">
                 <#list basefileInfos as fileinfo>
                  <#if subject.subCode==fileinfo.filetype>
<#if fileinfo.fileName?substring(fileinfo.fileName?index_of(".")+1)=="txt"||fileinfo.fileName?substring(fileinfo.fileName?index_of(".")+1)== "doc"||fileinfo.fileName?substring(fileinfo.fileName?index_of(".")+1)== "pdf" ||fileinfo.fileName?substring(fileinfo.fileName?index_of(".")+1)== "docx" > 
                                 <li id="${fileinfo.id}"><a class="downloadnotimg" href="#" reallydocpath="${fileinfo.url}"><img style="width:110px;height:69px" src="${path}/images/mark.jpg" class="image0 ${fileinfo.id}"></a><p title="${fileinfo.fileName}"><#if fileinfo.fileName?length gt 7>${fileinfo.fileName[0..6]}...<#else>${fileinfo.fileName}</#if></p></a><img  id="${fileinfo.id}" dataid="${fileinfo.id}" src="${path}/js/adgallery/ad_closed.png" class="closed" title="删除" οnclick="delImg(this,${fileinfo.filetype},'initdel')" /></li>
                     <#else>
                                 <li id="${fileinfo.id}"><a class="fileImg" href="${apachepath}/${fileinfo.url}"><img style="width:110px;height:69px" src="${apachepath}/${(fileinfo.scaleImageUrl)?default(fileinfo.url)}" class="image0 ${fileinfo.id}"></a><p title="${fileinfo.fileName}"><#if fileinfo.fileName?length gt 7>${fileinfo.fileName[0..6]}...<#else>${fileinfo.fileName}</#if></p></a><img  id="${fileinfo.id}" dataid="${fileinfo.id}" src="${path}/js/adgallery/ad_closed.png" class="closed" title="删除" οnclick="delImg(this,${fileinfo.filetype},'initdel')" /></li>
        </#if>
                 
    </#if>
                 </#list>
               </ul>
             </div>
           </div>
         </div>
         <div title="进度条码" class="zz_show" id="fileQueue_${subject.subCode}" style="display:inline;"></div>
       </div>
       <div class="clear"></div>
        </div>
     
</#list>
<script>
$(document).ready(function() {
     var galleries = $('.ad-gallery').adGallery();
     $("a.fileImg").fancybox();
       
       //给非图片标签注册单击不响应的事件
       $(".downloadnotimg").bind('onclick',function(){
        return ;
       });
       //给非图片标签注册下载事件
       $(".downloadnotimg").bind('dblclick',function(){
        $("#filepath").val($(this).attr("reallydocpath"));
        $("#downloadform").submit();
       });
});
$(function() {

if($.query.get('readonlyflag')=="yes" ||  $("#readonlyflag",parent.parent.document).val()=="yes" ||  $("#readonlyflag").val()=="yes"){//只读状态没有删除图标
$(".closed").each(function(){
$(this).hide();
});
$("#fileAndIconDivID").hide();
}

var seldmenu=$(".button3",parent.document);
if(typeof(seldmenu)!="object"){
seldmenu=$(".button3",parent.parent.document)
}
/*首次进入统计下缺失的附件类型,方便进行附件校验*/
$(".filetypes").each(function(){
if($(this).find("li").size()==0){//对应附件类型无数据则记录
rushintofileinfo($(this).attr("filetype"),$(this).attr("filetypename"),"add");
}
});
});
//压入为空的附件信息 keystr 以菜单id和附件类型作key值
function rushintofileinfo(filecode,valstr,processtype){
var seldmenu=$(".button3",parent.document);
var tempplateid = $.query.get('tempplateid');
if(typeof(seldmenu)!="object"){
seldmenu=$(".button3",parent.parent.document)
tempplateid = seldmenu.attr("tempplateid");
}
if(processtype=="add"){
if(parent.fileinfomap!=undefined){
parent.fileinfomap.put(tempplateid+":"+filecode,valstr);
}else{
parent.parent.fileinfomap.put(tempplateid+":"+filecode,valstr);
}
}else if(processtype=="del"){
if(parent.fileinfomap!=undefined){
parent.fileinfomap.remove(tempplateid+":"+filecode);
}else{
parent.parent.fileinfomap.put(tempplateid+":"+filecode);
}
}
}
</script>

Fancybox的特点如下：

  1. 可以支持图片、html文本、flash动画、iframe以及ajax的支持
  2. 可以自定义播放器的CSS样式
  3. 可以以组的形式进行播放
  4. 如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
  5. Fancybox播放器支持投影，更有立体的感觉

Fancybox使用方法：

1、引入jquery核心库和Fancybox插件库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

可选 - 如果需要用到fancy transition（一些动画效果）你还需要引入以下脚本

<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

2、添加样式表文件

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">

3、在页面上创建链接元素

A、图片元素

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" kesrc="image_small.jpg" alt=""></a>

B、普通文本

<a id="inline" href="#data" kesrc="#data">This shows content of element who has id="data"</a>
 
<div style="display: none;">
    <div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

C、Iframe

<a href="http://www.example?iframe">This goes to iframe</a>
 
或者
 
<a class="iframe" href="http://www.example">This goes to iframe</a>

D、Ajax

<a href="http://www.example/data.php">This takes content using ajax</a>

如果你要显示描述信息，可以在链接上加上title，将描述信息放到title中。

4、最终的jquery初始化代码

$(document).ready(function() {
 
    /* 最基本的，使用了默认配置 */
     
    $("a#single_image").fancybox();
     
    /* 使用了自定义配置 */
     
    $("a#inline").fancybox({
        'hideOnContentClick': true
    });
 
    /* 一下配置支持组播放 */
     
    $("a.group").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });
     
});

用rel标签来创建相册

<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""></a>     
 
<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""></a> 
 
$("a.grouped_elements").fancybox();

Fancybox的API和配置选项说明

属性名默认值简要说明
padding10浏览框内边距，和css中的padding一个意思
margin20浏览框外边距，和css中的margin一个意思
opacityfalse如果为true，则fancybox在动画改变的时候透明度可以跟着改变
modalfalse如果为true，则'overlayShow' 会被设成 'true' ， 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 会被设成 'false'
cyclicfalse如果为true，相册会循环播放
scrolling'auto'设置overflow的值来创建或隐藏滚动条，可以设置成 'auto', 'yes', or 'no'
width560设置iframe和swf的宽度，如果 'autoDimensions'为 'false'，这也可以设置普通文本的宽度
height340设置iframe和swf的高度，如果 'autoDimensions'为 'false'，这也可以设置普通文本的高度
autoScaletrue如果为true，fancybox可以自适应浏览器窗口大小
autoDimensionstrue在内联文本和ajax中，设置是否动态调整元素的尺寸，如果为true，请确保你已经为元素设置了尺寸大小
centerOnScrollfalse如果为true，当你滚动滚动条时，fancybox将会一直停留在浏览器中心
ajax{ }和jquery的ajax调用选项一样
注意: 'error' and 'success' 这两个回调事件会被fancybox重写
swf{wmode: 'transparent'}swf的设置选项
hideOnOverlayClicktrue如果为true则点击遮罩层关闭fancybox
hideOnContentClickfalse如果为true则点击播放内容关闭fancybox
overlayShowtrue如果为true，则显示遮罩层
overlayOpacity0.3遮罩层的透明度（范围0-1）
overlayColor'#666'遮罩层的背景颜色
titleShowtrue如果为true，则显示标题
titlePosition'outside'设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over'
titleFormatnull可以自定义标题的格式
transitionIn, transitionOut'fade'设置动画效果. 可以设置为 'elastic', 'fade' 或 'none'
speedIn, speedOut300fade 和 elastic 动画切换的时间间隔, 以毫秒为单位
 
changeSpeed300切换时fancybox尺寸的变化时间间隔（即变化的速度），以毫秒为单位
changeFade'fast'切换时内容淡入淡出的时间间隔（即变化的速度）
easingIn, easingOut'swing'为 elastic 动画使用 Easing
showCloseButtontrue如果为true，则显示关闭按钮
showNavArrowstrue如果为true，则显示上一张下一张导航箭头
enableEscapeButtontrue如果为true，则启用ESC来关闭fancybox
onStartnull回调函数，加载内容是触发
onCancelnull回调函数，取消加载内容后触发
onCompletenull回调函数，加载内容完成后触发
onCleanupnull回调函数，关闭fancybox前触发
onClosednull回调函数，关闭fancybox后触发

 

賣逗逗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JQuery图片展示插件之Fancybox
02-28 5348
<br />       Fancybox是一款基于JQuery开发的类LightBox插件，但比LightBox更绚丽。支持对图片添加阴影效果等，其主要特性如下：<br />       1、可以显示图片、HTML元素、SWF影片、IFrames或者Ajax请求；<br />       2、通过设置和CSS来实现定制化；<br />       3、对相关图片分组，并添加导航操作；<br />       4、如果页面添加了鼠标滚轮插件，Fancybox可以对鼠标滚轮事件进行响应；<br />     
jquery-fancybox扩展实现图片旋转
08-10
**jQuery Fancybox 图片旋转功能实现详解** 在网页中展示图片时，我们有时需要提供一些增强用户体验的功能，比如图片预览、放大查看以及旋转。jQuery Fancybox 是一款强大的轻量级图片和媒体灯箱插件，它允许用户在...
基于jQuery的图片点击弹窗预览大图插件，jquery.fancybox-1.3.4
03-16
基于jQuery的图片点击弹窗预览大图插件
FancyBox.js基于JQuery图集弹层插件用法
天天打码-16年老码农
09-11 1056
FancyBox是一款基于 jquery 开发的类 Lightbox 插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该 lightbox 除了能够展示图片之外，还可以展示 iframed 内容， 通过 css 自定义外观。相对与 Lightbox 而言，阴影效果更好。但是比 Lightbox 绚丽。使用很是简单，可以参照 Lightbox，修改添加代码。
jquery-fancybox使用
Mike_lucy的博客
04-12 384
fancybox弹窗任务类型：</div><div class="title">任务类型：</div><div class="title">任务类型：
jquery fancybox插件
u014738617的博客
01-08 2267
1. 介绍 fancyBox 是一个 JavaScript 库，它以优雅的方式展示图片，视频和一些 html 内容。它包含你所期望的一切特性 —— 支持触屏，响应式和高度自定义。 1.1 依赖 推荐 jQuery 3+，但是 fancyBox 仍支持 jQery 1.9.1+ 和 jQuery 2+ 。 注意 如果你在图片缩放时遇到了问题，请升级 jQuery 到最近版本（至少v3.2.1）。 1.2 兼容 fancyBox 支持触屏操作，而且支持缩放等手势操作。在移动端和PC端上都十分合适。
jquery.fancybox图片预览组件使用整理_fancyBox3使用整理
天马3798
06-26 2071
一、jquery.fancybox 介绍 源代码地址： https://github.com/fancyapps/fancybox 官网展示地址：https://fancyapps.com/ fancyBox是一个JavaScript库，它以优雅的方式展示图片，视频和一些html内容。它包含你所期望的一切特性—支持手势，响应式和高度自定义。 目前版本3.x系列。 支持浏览器： Chrome Firefox IE10/11 Edge iOS Safari Android 7.0 Ta.
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
12-11
总之，Fancybox1.3.1作为一款强大的jQuery插件，提供了丰富的功能，但同时也需要注意与特定浏览器的兼容性问题。通过理解其工作原理和正确应对技巧，我们可以有效地解决在IE中遇到的图片显示问题，确保用户体验的...
jquery 弹出层插件FancyBox弹出层演示支持图片、文章
10-27
《jQuery弹出层插件FancyBox：图片与文章的精彩呈现》 在网页设计中，弹出层（Modal）是一种常见的交互元素，用于显示详细信息或者进行特定操作，而jQuery作为JavaScript的一个强大库，提供了丰富的插件来实现这一...
fancybox 弹窗插件
11-08
fancybox插件基于jQuery框架，使得它与现有的jQuery应用无缝集成。它将网页中的链接、图像或IFrame包装在一个轻量级的弹出层中，通过淡入淡出效果、缩放动画等视觉特效，为用户带来一种优雅的浏览体验。在fancybox-...
使用jQuery插件FancyBox轻松实现弹窗视频
10-09
使用jQuery插件FancyBox轻松实现弹窗视频，使用jQuery插件FancyBox轻松实现弹窗视频
使用 jquery.fancybox进行图片预览查看的代码举例
ABC程序人生的专栏
12-07 542
使用 jquery.fancybox进行图片预览查看的代码举例 jquery加以3.0以上的。
Fancybox插件，动态创建的元素绑定事件
何东狮吼
08-19 2567
打开 jquery.mousewheel-3.0.4.pack.js，然后搜索  click.fb ，共有2处，分别把2处前面的 unbind 和 bind  改成 die  live 例如 $.fn.fancybox = function(options) {$(this)
fancybox参数设置
kzhzhang的专栏
05-29 842
$('.fancybox').fancybox({ helpers: { //缩略图 thumbs : { width: 50, height: 50 }, //overlay为null时，页面锁死 overlay:{ ...
Fancybox—Fancybox的API和配置选项说明
gaohuanjie的专栏
03-13 7873
padding：默认值为10，浏览框内边距，和css中的padding一个意思。 margin： 默认值为20，浏览框外边距，和css中的margin一个意思。 opacity：默认值为false，如果为true，则fancybox在动画改变的时候透明度可以跟着改变。 modal：默认值为false，如果为true，则'overlayShow' 会被设成 'true' ， 'hideO
jquery插件fancybox的使用
qq_45701634的博客
07-28 452
<html> <head> <meta name="viewport" content="width=device-width" /> <title>Fancy</title> <link href="~/Content/fancyBox/jquery.fancybox.css" rel="stylesheet" /> </head> <body> <div&gt.
fancyboxv5.0视频宽度比低版本窄调宽的解决方案
最新发布
Wilelm的博客
01-11 511
fancyboxv5.0视频宽度比低版本窄调宽的解决方案
【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件
dengrongshou5105的博客
08-14 325
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox。它除了能够展示图片之外，还可以展示 flash、iframe 内容、html 文本以及 ajax 调用，我们可以通过 css 来自定义外观。 fancybox 特点： 可以支持图片、html 文本、flash 动画、iframe 以及 ajax 的支持； 可以自定义播放器的 css 样式； 可以以组的形...
fancybox 弹出层图片固定宽度/高度设置
Julie_Go的专栏
01-15 894
$('.fancybox').fancybox({ autoScale:false, maxWidth:500, maxHeight:400 });
jQuery常用插件集合：从文字特效到Windows弹出框
"jQuery常用插件收集，包括文字特效、lodging、grid表格数据、提示框、拖放组件、menu菜单、文件上传控件、tree树及windows弹出框等，由王明波整理分享，旨在方便jQuery爱好者查找和使用。" jQuery作为一个广泛使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值