换回wordpress了,好郁闷,很多帖子又要重新发了!

JQuery 图片加链接 加lightbox效果

技术文摘 赵大官人 1094℃ 0评论

简单的JQuery实现图片增加超链接并且增加lightbox放大效果

<script src="js/jquery.js"></script><script src="js/jquery.lightbox-0.5.js"></script>
<div id="body1">
<img src="http://www.awzsr.com/uploads/allimg/120705/1-120F51A5102J.jpg" alt="" width="164" />
<img src="http://www.awzsr.com/uploads/allimg/120705/1-120F51A5102J.jpg" alt="" width="164" />
</div>
<script>// <![CDATA[
$(document).ready(function ($) {
//<!--JQuery实现图片添加链接-->
$('#body1 img').each(function (i) {
//只对ID为logPanel的div内的图片操作(可根据实际情况修改,或去掉#logPanel ,即对页面内所有图片遍历操作)
if (this.width > 80) { //图片宽度大于80时才对其操作
$(this).wrap("<a href=" + $(this)[0].src + " class=lightbox></a>");
//给符合条件的图片加入自身的链接,加入jquery.lightbox的识别标志之一class=lightbox
}
});
$("#body1 a.lightbox").lightBox(); //添加lightbox效果,同样需注意#logPanel 的限制
}); //<!--end-->
//简单的JQuery实现图片增加超链接并且增加lightbox放大效果< /script>
</body>
</html>
// ]]></script>

转载请注明:赵大官人 » JQuery 图片加链接 加lightbox效果

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 这个真不错 谢谢!
    福记»NoNo2014-08-26 18:49 回复
    • 哟呵! 不错哦
      福记»紫楓葉2014-08-26 18:49 回复
  2. 测试排序
    福记»NoNo2014-08-26 18:59 回复