当前位置:jQuery学习 > jQuery > jQuery插件-显示图片缩略图

jQuery插件-显示图片缩略图

时间:2010-10-27QQ群:116983258

今天,我们看看使用一个jQuery插件,实现图片缩略图的显示,并查看大图片。这样,当显示的图片非常大时,很有必要显示一张小图片,如果用户有兴趣查看大图片时,如果当用户点击时,能在当前页打开图片的话,这样可以很大的提高用户体验。下边,我们看看使用方法:

我们使用 Easy 来实现本篇的功能,通过简单的应用你就会发现这个插件能很好的达到我们的目的。首先我们在页面中引入jQuery文件、easy.js和main.js,后两个js文件可以从演示页中找到,也可以直接从Easy网站下载到。下边是简单的html:

<a href="large.jpg"><img src="small.jpg" class="popup" /></a>

默认的样式名为popup,如果我们改变了样式名的话,要在main.js中做相应的改变,比如样式名改变为pop,那么main.js中的代码应该改为如下:

$(document).ready(function(){ 
	$.easy.popup(".pop");
});

如果要创建一个图片集的话,也就是相关的几张图片时,我们要在样式中加入一个gallery名,如下:

<div>
    <a href="anyixuan01.jpg" class="popup gallery">
        <img src="anyixuan1.jpg">
    </a>
    <a href="anyixuan04.jpg" class="popup gallery">
        <img src="anyixuan4.jpg">
    </a>   
</div>

我这里为了省事,直接从原来项目里粘了一段,建议大家规范的将a标签放置在无序列表中。

如果要创建另一个图片集时,应该写为如下的形式,这里不做过多的说明了。怎么写是很清晰的,具体可以到演示页看看效果。好了,easy.js的用法就说到这里,有了它我们可以在自己的网站中加入图片预览效果,提高了网站的用户体验。

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/use-jquery-plugin-to-show-thumbnail-gallery.html

大家说了些什么

  1. 1. huang 2010-11-28 14:34

    这个功能可以用到我卖石头的网站上,呵呵http://www.shangshuishi.com

  2. 2. web前端寒风 2011-08-27 08:56

    学习了

所有话题