首页 > 微信营销 > 微信开发 > 如何给文章页所有图片批量加LIGHTBOX效果?

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

2018-07-17 12:05:05 200万次浏览

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

<link rel=”stylesheet” href=http://www.iswweb.cn/news/”css/lightbox.css” type=”text/css” media=”screen” />>

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

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

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

<link rel="”stylesheet”" href="http://www.iswweb.cn/news/”css/lightbox.css”" type="”text/css”" media="”screen”" />