使用slimbox2为你的博客添加图片灯箱效果
在网上溜达的时候,发现有些童鞋的博客图片显示的效果很炫,一查才知道使用的是图片灯箱效果,既然咱的博客已经加载了jquery库,也不能浪费了,那咱也搞一个吧,找了找发现slimbox2这个插件很不错,参照网上的教程,做好了
下载附件slimbox,解压后把所有文件上传到主题文件夹里,在header.php文件里head标签之间加上css链接代码,链接到slimbox的css样式表,代码:
推荐把slimbox的css代码添加到主题style.css文件里,以减少网页加载的css文件个数。
然后在footer.php文件里body标签之前连上slimbox2.js,代码:
还是推荐把slimbox2的代码和以前写的js脚本合并成一个文件加载,这样可以优化页面的加载时间。
然后就是一句代码,写在上面那句后面就行:
其中红色部分根据你的主题作相应的修改,其实就是jquery选择器选择你的页面中有图片的那些标签。
大功告成!
看看效果:
如果你插入的图片过大,可以在css样式里固定图像的尺寸,甚至加上鼠标滑过的效果!
- 原文作者:槛外小筑
- 原文链接:https://www.kwxiaozhu.com/archives/526.html
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议. 进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。