使用LightBox可以美化图片的显示效果,在点击图片时显示并不用跳转到另一个页面去查看图片,而是在当前页前置显示,并且带有很cool的效果~~

如图:

jQuery.lightbox美化图片显示效果

jQuery.lightbox美化图片显示效果(点我就能看到效果啦)

只要点击图片,就会在当前页面弹出图片的大图,背景遮罩,点击空白处即可关闭大图。动画效果也是很cool的~~~

使用也非常简单,只要四步就能搞定~

1、引入必要的JS文件;5张展现效果时用的图片。


2、引入必要的样式。

3、检查小图处的样式,要在小图外加A标签,其链接为大图,此A标签的title属性为显示该图片的文件名。例如:

””

4、使用jQuery选择器,选择到自己的A标签,然后.lightBox()就OK啦~~~~以下选择器中任选一个使用就可以:

经过以上四步,就可以使用很绚丽的jQuery.lightBox效果了~~
不过这次我用的这个主题比较复杂,总是调用来调用去的
jQuery文件的位置很不好放,折腾半天发现放在最下角才好,为了稍显美观,我把jQuery选择器调用显示效果的代码也放到jQuery.lightbox这个js文件里了。由于主题的特殊性,此效果用到的一些图片的路径都需要调正,要放在网站的根目录下才可以,当然,也可以通过调整JS文件内的路径来达到效果。我使用的是jquery.lightbox-0.5.pack.js,这个瘦身后的js只有6K,最节省流量了~~哈哈。。