首页>>Jquery图片>>图片组展示 放大后可以翻页 点击图片放大展示(2014-04-22)

图片组展示 放大后可以翻页 点击图片放大展示

图片组展示 放大后可以翻页 点击图片放大展示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <table style="width: 100%; margin: 0 auto;" cellpadding="0px" cellspacing="0px">  
  2.     <tr>  
  3.         <td>  
  4.             <!-- Start VisualLightBox.com BODY section id=1 -->  
  5.             <div id="vlightbox1">  
  6.             <a class="vlightbox1" href="images/demo/main_demo/part1/data/images1/image_lightbox.jpg" title="Image Lightbox"><img src="images/demo/main_demo/part1/data/thumbnails1/image_lightbox.jpg" alt="Image Lightbox"/>Image Lightbox</a>  
  7.             <a class="vlightbox1" href="images/demo/main_demo/part1/data/images1/jquery_lightbox.jpg" title="Lightbox features"><img src="images/demo/main_demo/part1/data/thumbnails1/jquery_lightbox.jpg" alt="Lightbox features"/>Lightbox features</a>  
  8.             <a class="vlb" href="http://visuallightbox.com">Lightbox Images by VisualLightBox.com v5.3</a>  
  9.             </div>  
  10.             <script src="images/demo/main_demo/part1/engine/js/thumbscript1.js" type="text/javascript"></script>  
  11.             <script src="images/demo/main_demo/part1/engine/js/vlbdata1.js" type="text/javascript"></script>  
  12.             <!-- End VisualLightBox.com BODY section -->  
  13.         </td>  
  14.         <td>  
  15.             <!-- Start VisualLightBox.com BODY section id=2 -->  
  16.             <div id="vlightbox2">  
  17.             <a class="vlightbox2" href="images/demo/main_demo/part2/data/images2/lightbox_zoom.jpg" title="Lightbox themes"><img src="images/demo/main_demo/part2/data/thumbnails2/lightbox_zoom.png" alt="Lightbox themes"/>Lightbox themes</a>  
  18.             <a class="vlightbox2" href="images/demo/main_demo/part2/data/images2/lightbox_slideshow.jpg" title="Lightbox wizard"><img src="images/demo/main_demo/part2/data/thumbnails2/lightbox_slideshow.png" alt="Lightbox wizard"/>Lightbox wizard</a>  
  19.             <a class="vlb" href="http://visuallightbox.com">Lightbox Images by VisualLightBox.com v5.3</a>  
  20.             </div>  
  21.             <script src="images/demo/main_demo/part2/engine/js/vlbdata2.js" type="text/javascript"></script>  
  22.             <!-- End VisualLightBox.com BODY section -->  
  23.         </td>  
  24.         <td>  
  25.             <!-- Start VisualLightBox.com BODY section id=3 -->  
  26.             <div id="vlightbox3">  
  27.             <a class="vlightbox3" href="images/demo/main_demo/part3/data/images3/lightbox_effect.jpg" title="Lightbox effect"><img src="images/demo/main_demo/part3/data/thumbnails3/lightbox_effect.jpg" alt="Lightbox effect"/></a>  
  28.             <a class="vlightbox3" href="images/demo/main_demo/part3/data/images3/lightbox_window.jpg" title="Lightbox zoom"><img src="images/demo/main_demo/part3/data/thumbnails3/lightbox_window.jpg" alt="Lightbox zoom"/></a>  
  29.             <a class="vlb" href="http://visuallightbox.com">Lightbox Images by VisualLightBox.com v5.3</a>  
  30.             </div>  
  31.             <script src="images/demo/main_demo/part3/engine/js/thumbscript3.js" type="text/javascript"></script>  
  32.             <script src="images/demo/main_demo/part3/engine/js/vlbdata3.js" type="text/javascript"></script>  
  33.             <!-- End VisualLightBox.com BODY section -->  
  34.         </td>  
  35.     </tr>  
  36. </table>          

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_315.html