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