简单的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效果