一款简单实用的jQuery图片画廊插件

news/2023/6/8 5:22:08

图片画廊

今天分享一个自己实现的jQuery 图片画廊插件。

看一下效果图:

360截图20150802102358254

点击图片时:

360截图20150802102415423

在线演示地址:http://www.jr93.top/photoGallery/photoGallery.html

使用

使用也是很简单,代码如下:

<div id="photoGallery-container"><img class="photoGallery" data-src="img/1-1.jpg" src="img/1-1.jpg" data-id="pic_1" data-desc="图片1"><img class="photoGallery" data-src="img/1-2.jpg" src="img/1-2.jpg" data-id="pic_2" data-desc="图片2"><img class="photoGallery" data-src="img/1-3.jpg" src="img/1-3.jpg" data-id="pic_3" data-desc="图片3"><img class="photoGallery" data-src="img/1-4.jpg" src="img/1-4.jpg" data-id="pic_4" data-desc="图片4"><img class="photoGallery" data-src="img/1-5.jpg" src="img/1-5.jpg" data-id="pic_5" data-desc="图片5"><img class="photoGallery" data-src="img/1-6.jpg" src="img/1-6.jpg" data-id="pic_6" data-desc="图片6"><img class="photoGallery" data-src="img/1-7.jpg" src="img/1-7.jpg" data-id="pic_7" data-desc="图片7"><img class="photoGallery" data-src="img/1-8.jpg" src="img/1-8.jpg" data-id="pic_8" data-desc="图片8">
</div>

其中id为photoGallery-container的容器内存放自己想要展示的图片组,每个img都有一个.photoGallery的类和三个自定义的data-属性,分别是:

.photoGallery : 定义缩略图的样式,标识此图片是展示图片之一

data-src : 定义缩略图对应大图的路径

data-id : 定义图片的id

data-desc : 定义图片的描述

所以,这要满足以上四个很简单的条件,那么就能很轻松的使用了(PS:IE6不兼容)

github下载地址:https://github.com/JR93/photoGallery

 

若需转载,请注明出处,谢谢!

转载于:https://www.cnblogs.com/jr1993/p/4695670.html


https://dhexx.cn/news/show-17148.html

相关文章

Linux+QT4+我忙活半宿的结果

一个简单的计算器&#xff0c;虽然很弱智&#xff0c;而且还不完善&#xff0c;但是通过它&#xff0c;我大致了解了一下QT的用法QT真的很高级&#xff0c;已经近乎纯面向对象的了。QString可以自己转化成多种类型&#xff0c;就这一点&#xff0c;就已经和C#差不多了。不过C#的…

msflexgrid允许大选择_喷灌时要如何选择喷头?

如何选择喷头&#xff1f;喷灌喷头选择的内容主要是确定喷头型号、喷嘴直径、工作压力、喷头流量、射程等参数。喷头性能、组合间距和运行方式直接影响喷洒均匀度、灌溉强度和雾化指标等质量参数&#xff0c;所以喷头选择适宜和组合间距合理能够保证喷洒质量&#xff0c;节省投…

Xcode 快捷键、常用技巧

关于iOS开发中的技能快捷键 经常使用鼠标太TM的D疼了&#xff0c;快捷键能大大地提高我们的开发速度&#xff0c;使我们的手指尽情的在键盘上飞舞&#xff0c;优美的代码&#xff0c;哈哈哈&#xff0c;那些常规的复制、粘贴、剪切请自行度娘或者Google一下。 1. 不可小视的 O…

ip头部多少字节_IP数据分片之MTU和TCP的MSS

1.IP数据分片之MTU和TCP的MSS1.1最大传输单元(Maximum Transmission Unit&#xff0c;MTU)数据链路层传输的帧大小是有限制的&#xff0c;以太网和IEEE 802.3对数据帧的长度都有一个限制&#xff0c;不能把一个太大的包直接塞给链路层&#xff0c;这个限制被称为最大传输单元(M…

jenkins持续集成入门4 - MAVEN,jdk等环境配置

1 安装maven&#xff0c;配置MAVEN_HOME环境变量 2 全局工具配置关联JDK和Maven&#xff0c;Global Tool Configuration菜单&#xff0c;如下 3 添加Jenkins全局变量 Manage Jenkins->Configure System->Global Properties &#xff0c;添加三个全局变量JAVA_HOME、M2_H…

【linux高级程序设计】(第十四章)TCP高级应用 2

socket多路复用应用 int select (int nfds, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct timeval *timeout) 功能&#xff1a;轮循等待的方式&#xff0c;从多个文件描述符中获取状态变化后的情况 readfds &#xff1a;包含所有可能因状态变成可读而触发se…

git 忽略 部分文件夹_Git 系统学习笔记

公众号内发送Git获取Git官方PDF教程版本控制 版本控制是一种记录一个或若干个文件内容变化、以便将来查阅特定版本修订情况的系统。本地版本控制系统很久以前就开发了许多本地版本控制系统、大多都是采用某种简单的数据库来记录文件的历次更新差异。其中最流行的一种叫做 RCS、…

SpringMVC经典系列-13使用SpringMVC处理Ajax请求---【LinusZhu】

注意&#xff1a;此文章是个人原创&#xff0c;希望有转载须要的朋友们标明文章出处&#xff0c;假设各位朋友们认为写的还好&#xff0c;就给个赞哈&#xff0c;你的鼓舞是我创作的最大动力&#xff0c;LinusZhu在此表示十分感谢&#xff0c;当然文章中如有纰漏&#xff0c;请…

规格选择_地板砖如何打蜡?地板砖规格如何选择?

有些人想要让地板砖呈现光滑的效果&#xff0c;于是就打算对地板砖进行打蜡&#xff0c;但自己之前没有打蜡过&#xff0c;不知道地板砖如何打蜡?家里决定装饰地板砖的时候&#xff0c;就需要确定它的规格&#xff0c;规格不同的地板砖带来效果不一样&#xff0c;地板砖规格如…

jenkins持续集成入门18 - (Pipeline Script from SCM)流水线项目 用dockerfile-maven-plugin生成docker镜像并push到harbor私有仓库

前提或注意事项&#xff1a; a docker远程连接已开启idea集成docker 实现远程连接&#xff0c;可视化操作_小哇-CSDN博客 b Harbor先建立好一个项目&#xff0c;名称为 haiwangc jenkins中建立的项目名要和idea中maven的项目名称保持一致 d dockerfile-maven-plugin的权限J…