投稿    登录
  博主录制的Python3爬虫视频教程已发布!详情请戳Python3爬虫视频教程!希望大家支持!非常感谢!

jQuery应用三之图片浏览插件LightBox

JavaScript 崔庆才 5422浏览 4评论

综述

我们肯定用过QQ空间吧,看到QQ空间里面的照片,点一下就会出现一个悬浮框,显示放大后的图片,而且可以点击左右箭头来查看上一张和下一张照片,怎样?这种效果,想不想实现一下。

在这里,我们就引用一个jQuery插件来帮助我们完成这件事情,让我们拭目以待吧

在线演示

我们首先来在线演示一下效果,然后我们说一下是怎样的实现,点开链接进行预览吧

在线预览

 插件文件

其中包含了两个JS文件,一个是jQuery库,另一个就是lightbox插件文件。另外还有一个css文件,主要作用是给图片浏览器规定样式

HTML

我们写一个DEMO,包含了六张图片,用一个ul列表呈现出来

其中images文件夹中存在了六张图片,其中每一个中的超链接的href链接是一张图片,超链接中还包含了img标签。这样可以保证点击图片的时候可以呼出一张大图。

功能简析

我们取到了所有的超链接元素,然后调用了lightBox方法,参数是一系列集合,在这里定义了

在这里给出所有的参数说明

名称 默认值 说明
overlayBgColor #000 背景色
overlayOpacity 0.8 背景色透明度
fixedNavigation false 是否始终显示上一张、下一张按钮
imageLoading images/lightbox-ico-loading.gif 加载图片时显示的图片
imageBtnPrev images/lightbox-btn-prev.gif 上一张按钮的图片
imageBtnNext images/lightbox-btn-next.gif 下一张按钮的图片
imageBtnClose images/lightbox-btn-close.gif 关闭按钮的图片
imageBlank images/lightbox-blank.gif 上一张、下一张按钮周围空白部分的图片(默认透明)
containerBorderSize 10 展示图片的边框宽度
containerResizeSpeed 400 展示过程切换的速度
txtImage Image 页码辅助文字
txtOf of 页码辅助文字
keyToClose c 关闭展示的快捷键
keyToPrev p 上一张的快捷键
keyToNext n 下一张的快捷键

值得注意的地方是

imageLoading ‘images/lightbox-ico-loading.gif’ 加载图片时显示的图片
imageBtnPrev ‘images/lightbox-btn-prev.gif’ 上一张按钮的图片
imageBtnNext ‘images/lightbox-btn-next.gif’ 下一张按钮的图片
imageBtnClose ‘images/lightbox-btn-close.gif’ 关闭按钮的图片

这几张张图片,我们如果不定义,则会使用JS中默认的定义路径

在 jquery.notesforlightbox.js 中,如下程序便实现了上一张图片和下一张图片等按钮的定义

所以,如果发现图片不正常显示可以检查一下这里的路径设置问题

代码下载

源码下载

代码已部署在GitHub,可以下载查看

总结

通过这个插件我们可以方便地实现图片的加载预览,效果也比较酷炫,希望对大家有帮助!

转载请注明:静觅 » jQuery应用三之图片浏览插件LightBox

喜欢 (8)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的