jQuery插件-显示图片缩略图

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

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

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

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

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

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

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

  1. <div> 
  2.     <a href="anyixuan01.jpg" class="popup gallery"> 
  3.         <img src="anyixuan1.jpg"> 
  4.     </a> 
  5.     <a href="anyixuan04.jpg" class="popup gallery"> 
  6.         <img src="anyixuan4.jpg"> 
  7.     </a>    
  8. </div> 

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

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

原文链接:

责任编辑:陈四芳 来源: jquery001.com
相关推荐

2019-02-15 14:00:57

Linux命令缩略图

2009-08-28 10:22:13

Windows 7系统故障应对缩略图无法显示

2013-08-12 15:26:49

测试

2012-07-18 20:59:40

jQuery

2012-01-10 14:59:42

jQuery

2020-11-02 14:49:46

GitHub Java图片

2009-08-28 15:19:17

C#实现缩略图

2009-08-12 16:33:37

.NET生成缩略图

2010-01-20 10:29:37

Chrome缩略图标签管理

2011-07-01 11:18:50

Qt 多线程

2009-10-26 17:38:22

VB.NET实现缩略图

2011-02-21 16:11:45

C#.NET.NET framew

2012-09-20 15:00:38

Win 8操作系统

2009-12-07 11:21:59

PHP生成缩略图

2022-02-21 16:38:19

Serverless图片视频

2023-06-02 10:41:50

2023-05-15 17:04:33

Edge浏览器

2015-08-25 16:13:18

Windows 10缓存

2021-07-01 14:52:17

Windows 11操作系统微软

2010-04-07 09:28:29

Chrome缩略图
点赞
收藏

51CTO技术栈公众号