插件描述：Galpop是一个创建图像库的jQuery插件。可以使用左右箭头键控制它，并使用您的浏览器自动调整大小。
如何安装
1.链接文件
除了jQuery库之外，Galpop Image Gallery还有一个.js和一个.css文件。
1 2 3 4 5 6 | <!-- 包括样式表--><link type="text/css" href="css/jquery.galpop.css" rel="stylesheet" media="screen" /><!--包含jQuery--><!--包括图库插件--><script type="text/javascript" src="js/jquery.galpop.min.js"></script> |
2.创建HTML
创建链接到弹出图像的锚点。您应该向锚点添加“data-galpop-group”属性，该属性将对所有图像进行分组，以便您可以使用下一个和上一个按钮。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <a href="images/image-1-large.jpg" class="galpop" data-galpop-group="gallery" title="first image"> <img src="images/image-1-tb.jpg" alt="first image thumbnail" /></a><a href="images/image-2-large.jpg" class="galpop" data-galpop-group="gallery" title="second image"> <img src="images/image-2-tb.jpg" alt="second image thumbnail" /></a><a href="images/image-3-large.jpg" class="galpop" data-galpop-group="gallery" title="third image"> <img src="images/image-3-tb.jpg" alt="third image thumbnail" /></a><a href="images/image-4-large.jpg" class="galpop" data-galpop-group="gallery" title="forth image"> <img src="images/image-4-tb.jpg" alt="forth image thumbnail" /></a><a href="images/image-5-large.jpg" class="galpop" data-galpop-group="gallery" title="fifth image"> <img src="images/image-5-tb.jpg" alt="fifth image thumbnail" /></a> |
3.调用插件
在HTML标记之后启动插件。
1 | $('.galpop').galpop(); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery抽奖可制定每次抽奖数
- 下一个特效： jQuery瀑布流分类筛选