今天给大家介绍的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="删除" onclick="" /></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="删除" onclick="" /></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="删除" onclick="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="删除" onclick="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的特点如下:
- 可以支持图片、html文本、flash动画、iframe以及ajax的支持
- 可以自定义播放器的CSS样式
- 可以以组的形式进行播放
- 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
- 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和配置选项说明
属性名 | 默认值 | 简要说明 |
---|---|---|
padding | 10 | 浏览框内边距,和css中的padding一个意思 |
margin | 20 | 浏览框外边距,和css中的margin一个意思 |
opacity | false | 如果为true,则fancybox在动画改变的时候透明度可以跟着改变 |
modal | false | 如果为true,则'overlayShow' 会被设成 'true' , 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 会被设成 'false' |
cyclic | false | 如果为true,相册会循环播放 |
scrolling | 'auto' | 设置overflow的值来创建或隐藏滚动条,可以设置成 'auto', 'yes', or 'no' |
width | 560 | 设置iframe和swf的宽度,如果 'autoDimensions'为 'false',这也可以设置普通文本的宽度 |
height | 340 | 设置iframe和swf的高度,如果 'autoDimensions'为 'false',这也可以设置普通文本的高度 |
autoScale | true | 如果为true,fancybox可以自适应浏览器窗口大小 |
autoDimensions | true | 在内联文本和ajax中,设置是否动态调整元素的尺寸,如果为true,请确保你已经为元素设置了尺寸大小 |
centerOnScroll | false | 如果为true,当你滚动滚动条时,fancybox将会一直停留在浏览器中心 |
ajax | { } | 和jquery的ajax调用选项一样 注意: 'error' and 'success' 这两个回调事件会被fancybox重写 |
swf | {wmode: 'transparent'} | swf的设置选项 |
hideOnOverlayClick | true | 如果为true则点击遮罩层关闭fancybox |
hideOnContentClick | false | 如果为true则点击播放内容关闭fancybox |
overlayShow | true | 如果为true,则显示遮罩层 |
overlayOpacity | 0.3 | 遮罩层的透明度(范围0-1) |
overlayColor | '#666' | 遮罩层的背景颜色 |
titleShow | true | 如果为true,则显示标题 |
titlePosition | 'outside' | 设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over' |
titleFormat | null | 可以自定义标题的格式 |
transitionIn, transitionOut | 'fade' | 设置动画效果. 可以设置为 'elastic', 'fade' 或 'none' |
speedIn, speedOut | 300 | fade 和 elastic 动画切换的时间间隔, 以毫秒为单位 |
changeSpeed | 300 | 切换时fancybox尺寸的变化时间间隔(即变化的速度),以毫秒为单位 |
changeFade | 'fast' | 切换时内容淡入淡出的时间间隔(即变化的速度) |
easingIn, easingOut | 'swing' | 为 elastic 动画使用 Easing |
showCloseButton | true | 如果为true,则显示关闭按钮 |
showNavArrows | true | 如果为true,则显示上一张下一张导航箭头 |
enableEscapeButton | true | 如果为true,则启用ESC来关闭fancybox |
onStart | null | 回调函数,加载内容是触发 |
onCancel | null | 回调函数,取消加载内容后触发 |
onComplete | null | 回调函数,加载内容完成后触发 |
onCleanup | null | 回调函数,关闭fancybox前触发 |
onClosed | null |
回调函数,关闭fancybox后触发
|