之前在项目中使用过一个基于 jquery
的图片预览插件—— jquery.galpop.js,甚是好用。并对它念念不忘🎈🎈🎈。今天来回顾一下,并总结一点使用方法。
1. 介绍
该插件由Richard Hung制作,Github地址,官方介绍及使用教程。
2. 可选参数
参数 | 默认值 | 可选值 | 描述 |
---|---|---|---|
arrowKeys | true | true/false | 使用键盘左箭头键和右箭头键。Esc关闭。 |
controls | true | true/false | 显示next / prev控制箭头 |
loop | true | true/false | 允许循环回到开始 |
maxWidth | null | integer | 宽度的最大像素量 |
maxHeight | null | integer | 高度的最大像素量 |
maxScreen | 90 | integer | 屏幕大小的最大百分比(覆盖maxWidth和maxHeight) |
updateRsz | true | true/false | 更新窗口大小 |
callback | null | Function | 函数在每个面板完成后运行 |
lockScroll | true | true/false | 当弹出窗口打开时,防止浏览器滚动 |
contentType | image | image, AJAX, iframe | 要在弹出框中打开的内容类型 |
AJAXContainer | null | jQuery selector | 要查找并加载到弹出框中的HTML元素 |
1 | $(function () { |
3. <a>
标签上使用的参数
(准备接受杨超越地洗礼吧)😆😆😆
title
data-galpop-link
data-galpop-link-title
data-galpop-link-target
加上该属性后,锚点中的页面将会在新的页面打开。
代码:
1
2
3<a href="..." title="杨超越" data-galpop-link="http://www.baidu.com" data-galpop-link-title="百度链接" data-galpop-link-target="http://www.baidu.com">
<img src="..."/>
</a>
4. 使用示例
因为是基于 jquery
制作的插件,在使用时需要引入 jquery.js 。此外还需要引入该插件的 js
/ css
文件。
1. 预览单个图片
1 | <a href="https://s2.ax1x.com/2019/03/13/AkieC6.md.jpg" class="galpop" title="图片1"> |
2. 预览多张图片
需要在 <a>
标签上添加 data-galpop-group=""
属性,图片左右两侧会出现箭头,点击浏览上一张或下一张。
1 | <a href="https://s2.ax1x.com/2019/03/13/AkieC6.md.jpg" class="galpop-multiple" data-galpop-group="multiple" title="图片1"> |
3. 回调函数
1 | $(function () { |
效果:
4. 手动打开一张图片
使用 openBox()
方法,可以传入参数对象,当然也可以加入回调函数。
1 | <button class="openAImage">手动打开一张图片</button> |
5. 手动打开多张图片
和手动打开一张图片同样使用 openBox()
方法,只不过之前的方法中传入的是一个图片的URL
,现在需要由多个图片URL
组成的数组,其他参数不变。
1 | <button class="openAImage">手动打开一组图片</button> |
6. 打开一个iframe页面
1 | <a href="./iframe.html" class="click-open-iframe">点击打开iframe</a> |
效果我就不演示了,总感觉不是特别实用。😏
5. 结语
⛳⛳⛳
首先感谢大家能读到这里,不胜感激!!!🤗
以上就是关于该插件的简单介绍和使用方法,以及对其参数的解读和实例,希望能帮到有需要的人。如果有不准确的地方,欢迎在下方评论中指正。😉