如何给文章页所有图片批量加LIGHTBOX效果?

如何给文章页所有图片批量加LIGHTBOX效果?wordpress可以使用插件就可以搞定了,但是非wordpress的网站设计时就没办法了,星翼网站设计在遇到这个问题时,第一时间去百度上搜索了一下,可惜一无所获。不过这个简单的问题难不倒我们,所以自己动手写了一段代码,完美解决这个问题。


<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”js/jquery-1.7.2.min.js”></script>
<script src=”js/lightbox.js”></script>
<script type=”text/javascript”>
<!–
$(function(){
$(‘.sub_content img’).each(function(){
$(this).wrap(“<a href=\””+$(this).attr(‘src’)+”\” rel=\”lightbox[p]\”></a>”);
});
})
–>
</script>

其实很简单,就是在页面加载时,把内容区块(也就是class为sub_content的这个个元素)内的所有img对象,批量在其外边增加上一个a标签,其中a标签里包含了 href 和rel属性,lightbox就是依靠rel中的lightbox字符来判断是否需要加效果的。所以只要在img标签外面增加了rel=”lightbox[p]”,lightbox就会自动增加效果。


下面附上lightbox的连接,有需要的直接去下载即可。


http://www.lokeshdhakar.com/projects/lightbox2/

文章出自:深圳微信开发公司,原文地址:http://www.iswweb.cn/news/1582.html,转载请保留文章出处即可!

本站文章大多数属于原创文章,欢迎大家转载!少数我们转载文章的文章,如未获您授权请点下方联系我们,我们会尽快下线处理!

相关内容