首页 > js/Jquery > 使用jQuery.LightBox美化图片效果,美化博客

使用jQuery.LightBox美化图片效果,美化博客

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

如图:

jQuery.lightbox美化图片显示效果

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

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

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

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

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.js”></script>

2、引入必要的样式。

<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css” media=”screen” />

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

<a href=”largeimage1.jpg” title=””><img src=”thumb_image1.jpg” width=”72″ height=”72″ alt=”” /></a>

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

<script type=”text/javascript”>
$(function() {
// Use this example, or…
$(‘a[@rel*=lightbox]’).lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or…
$(‘#gallery a’).lightBox(); // Select all links in object with gallery ID
// This, or…
$(‘a.lightbox’).lightBox(); // Select all links with lightbox class
// This, or…
$(‘a’).lightBox(); // Select all links in the page
// … The possibility are many. Use your creative or choose one in the examples above
});
</script>

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

  1. 匿名 11月 18th, 2014 @ 10:28 | #1

    lightbox能支持分面显示吗?即我一页显示10张图片共有3页 我在第1页点击显示大图了 显示完这10 怎么样在不关闭lightbox效果下可以查看到第2页 第3页的图片呢?

    • DigDeeply 11月 18th, 2014 @ 19:49 | #2

      不可以的啊,不翻页的话,你的dom结点都没有出来,是获取不到那些图片的,除非你在第一页偷偷的把图片放到dom里,只是不显示。

评论提交中, 请稍候...

留言

可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks