jQuery图像库插件Galpop

所属分类:媒体,UI-图片展示,幻灯片和轮播图,弹出层

 33548  348  查看评论 (5)
分享到微信朋友圈
X
jQuery图像库插件Galpop ie兼容9

如何安装

1.链接文件

除了jQuery库之外,Galpop Image Gallery还有一个.js和一个.css文件。

<!-- 包括样式表-->
<link type="text/css" href="css/jquery.galpop.css" rel="stylesheet" media="screen" />
<!--包含jQuery-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--包括图库插件-->
<script type="text/javascript" src="js/jquery.galpop.min.js"></script>

2.创建HTML

创建链接到弹出图像的锚点。您应该向锚点添加“data-galpop-group”属性,该属性将对所有图像进行分组,以便您可以使用下一个和上一个按钮。

<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标记之后启动插件。

$('.galpop').galpop();
相关插件-图片展示,幻灯片和轮播图,弹出层

jQuery画廊-least.js

jQuery画廊-least.js 类似于google图片搜索结果中的展示效果,least.js 随机和响应的JQUERY,HTML 5和CSS3画廊
  图片展示
 35385  330

HTML5/CSS3超酷焦点图特效

焦点图插件切换效果比较简单,但是外观和功能却十分强大。该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用。
  图片展示
 32664  306

简易的jQuery无缝滚动(原创)

简易无缝滚动,只需要改变高度(不用设宽度)嗯,或许看看就知道是不是你想要的
  图片展示
 37582  441

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 53358  356

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    程贫 0
    2019/4/3 22:17:35
    弹出图片大小可以调整吗? 回复
    竟然可以有这么长的名字 0
    2018/12/21 10:58:34
    图片分辨率太大了 弹出后有滚动条 这个怎么设置弹出后图片的大小 回复
    9 8 0
    2018/11/7 16:37:46
    有个问题,就是如果是动态拼接的a标签就不行 回复
    . 0
    2018/11/5 9:36:26
    一只无忧无虑的鱼 0
    2018/8/26 16:03:07
    这套代码对新上传的图片没有作用,执行的是外层的a标签中的href属性,跳转到新页面中了 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复