`
zhu074100236
  • 浏览: 4880 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

基于jQueryUI的图片预览插件

阅读更多
运用于特定项目环境。暂未改成普遍使用。

var imgGallary=function(){
var imgList=new Array();
var imgId=new Array();
var imgInfo=new Array();
this.push=function(id,element){
imgList.push(element);
imgId.push(id);
imgInfo.push(0);
};
this.preview=function(id){
var index=$.inArray(id,imgId);
if(index!=-1){
if(imgInfo[index]!=1){
for(var i=0;i<imgInfo.length;i++){
if(imgInfo[i]==1){
imgInfo[i]=0;
imgList[i].css("display","none");
}
}
imgInfo[index]=1;
imgList[index].css("display","block");
}
}
};
this.next=function(){
var index=$.inArray(1,imgInfo);
if(index<(imgInfo.length/2-1)){
imgInfo[index]=0;
imgList[index].css("display","none");

imgInfo[index+1]=1;
imgList[index+1].css("display","block");
}
};
this.previous=function(){
var index=$.inArray(1,imgInfo);
if(index>0){
imgInfo[index]=0;
imgList[index].css("display","none");

imgInfo[index-1]=1;
imgList[index-1].css("display","block");
}
};
};

var imgGal=new imgGallary();
$(function(){
$("#previewDialog").dialog({
title:"Image Preview",
autoOpen:false,
modal:true,
width:520,
height:520,
buttons:[
    {
text:"OK",
click:function(){
$("#previewDialog").dialog("close");
}
},
{
text:"Next",
click:function(){
imgGal.next();
}
},
{
text:"Previous",
click:function(){
imgGal.previous();
}
}
]
});
});
分享到:
评论

相关推荐

    基于JqueryUI的图片上传插件

    从压缩包的文件名"jQueryFileUpload.Net-master"来看,这可能是一个针对.NET平台实现的JqueryUI图片上传插件的源码仓库。这个插件可能使用了ASP.NET或其他.NET框架来处理服务器端的文件上传逻辑,与前端的JqueryUI...

    基于jquery的图片裁剪插件

    基于jQuery的图片裁剪插件为此提供了便利,它允许用户在浏览器中预览并裁剪图片,然后以所需尺寸上传。本文将深入探讨此类插件的核心原理、应用场景以及如何实现。 ### 1. jQuery框架基础 jQuery是一个广泛使用的...

    基于jquery ui的手动旋转元素插件

    【jQuery UI手动旋转元素插件】是针对jQuery UI框架的一个扩展插件,旨在提供更丰富的交互体验,允许用户手动操作页面元素进行旋转。这个插件是开发者为了弥补jQuery UI原生功能的不足,特意开发出来的,它使得网页...

    基于Jquery 的图片裁剪插件cropper

    **基于jQuery的图片裁剪插件Cropper** 在网页开发中,经常需要处理用户上传的图片,例如调整尺寸、旋转或裁剪以适应特定的显示需求。这时,一个高效的图片裁剪工具就显得尤为重要。"基于jQuery的图片裁剪插件...

    jQuery UI 实现图片裁切功能

    jQuery UI 是基于 jQuery 的一个扩展库,它通过添加额外的 CSS 样式和 JavaScript 插件,为开发者提供了更多界面交互的可能性。在实现图片裁切时,我们主要会用到其 Draggable 和 Resizable 组件,这两个组件分别...

    jQuery UI滑杆插件可Tooltip提示可设置多种颜色.zip

    jQuery UI滑杆插件是一款基于JavaScript库jQuery的用户界面组件,它提供了丰富的交互性和美观的视觉效果。在“jQuery UI滑杆插件可Tooltip提示可设置多种颜色.zip”这个压缩包中,我们可以找到一个实现自定义颜色和...

    常用的JQUERY UI插件

    在IT行业中,jQuery UI是一个非常受欢迎的库,它基于JavaScript框架jQuery,提供了丰富的用户界面组件。这个名为"常用的JQUERY UI插件"的资源集合,显然是一系列在MINISITE网站开发中常用的jQuery UI插件,旨在提升...

    jQuery点击弹出窗口放大图片和PDF文件预览插件.zip

    标题中的“jQuery点击弹出窗口放大图片和PDF文件预览插件”是一个基于jQuery的前端解决方案,用于在用户点击元素时展示图片或PDF文件的预览。这种功能常见于网页中,提供用户友好的交互体验,例如查看产品详情或阅读...

    图片放大控件(基于jQuery)

    【图片放大控件(基于jQuery)】是一种在网页中实现图片预览和放大的JavaScript插件,它利用了流行的jQuery库来提供高效、简洁的图片查看体验。在网页设计中,这种功能通常用于商品详情页或者照片展示,允许用户无损...

    jQuery Mobile图片轮转插件Camera1.3.4

    今天我们要探讨的是一个基于jQuery Mobile的图片轮转插件——Camera1.3.4,它专门用于实现手机上的图片轮换和播放功能。 Camera插件是针对HTML5和jQuery Mobile设计的,它充分利用了HTML5的新特性,如Canvas和Audio...

    17种基于jquery的图片缩略图列表

    本文将详细探讨17种基于jQuery的图片缩略图列表实现方法,旨在为开发者提供丰富的选择和灵感。 1. **基本缩略图滑动**:最基础的实现方式是通过jQuery来改变图片容器的宽度,使图片在滑动效果下展示为缩略图。这种...

    jquery弹出层插件

    这个弹出层插件就是基于jQuery的,它可以无缝集成到现有的jQuery代码中,简化弹出层的创建和管理。 二、弹出层原理与应用 弹出层是一种常见的UI设计元素,它能在不离开当前页面的情况下显示额外内容。在网页或移动...

    viewer.js图片预览插件

    Viewer.js是一款基于jQuery的高效、灵活的图像浏览插件,专为实现网页中的图片预览功能而设计。这款插件不仅支持基本的图片放大、缩小,还提供了丰富的自定义选项和交互功能,使得用户在网页上可以如同使用桌面图片...

    Jquery和jquery的常用插件

    1. **zTree**:zTree是一个强大的基于jQuery的树形插件,广泛应用于网站的导航菜单、数据展示、文件目录管理等场景。它支持多选、单选、拖拽、异步加载等功能,提供了丰富的API和配置项,可以灵活定制树形结构的样式...

    jquery ui 1.10

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,提供了丰富的交互效果、可自定义的主题以及多种实用组件。jQuery UI 1.10 版本是这个库的一个重要里程碑,它在前一版本的基础上进行了多方面的改进和...

    jquery图片标注插件增强.zip

    这个插件基于HTML5的Canvas元素,能够实现实时预览和图片处理,非常适合用于用户上传图片并按需调整的场景。在原始的cropper插件基础上进行二次开发,可以添加更多的自定义功能,例如在图片上添加标注。 对于"标注...

    基于jquery的打分插件显示星形图标插件打分评价插件

    **基于jQuery的打分插件实现详解** 在Web开发中,用户评分系统是常见的功能,它可以帮助用户对产品或服务进行直观的评价。基于jQuery的打分插件就是实现这一功能的有效工具,它通常通过显示星形图标来让用户进行...

    jQuery+PHP头像图片上传预览插件.zip

    本文将深入探讨一个基于jQuery和PHP实现的头像图片上传预览插件,帮助开发者了解其工作原理及实现方式。 首先,我们要明确这个插件的核心技术栈:jQuery和PHP。jQuery是一个轻量级的JavaScript库,它简化了HTML文档...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝...

Global site tag (gtag.js) - Google Analytics