首页>>Jquery图片>>jQuery全屏带缩略图相册(2021-06-28)

jQuery全屏带缩略图相册

jQuery全屏带缩略图相册
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="zoom-visualizer">  
  2.   <div class="lightbox-ofertas-bg"></div>  
  3.   <div class="lightbox">  
  4.     <div class="header">  
  5.       <div class="inside">  
  6.         <div id="wrapper-fechar" class="tooltip-content">  
  7.           <div class="tooltip">  
  8.             <p>Close</p>  
  9.             <span></span> </div>  
  10.           <a href="" class="fechar tooltip-caller"></a>  
  11.           <div class="clear"></div>  
  12.         </div>  
  13.         <div id="zoom">  
  14.           <div>  
  15.             <div class="tooltip-content">  
  16.               <div class="tooltip">  
  17.                 <p>Zoom Out</p>  
  18.                 <span></span> </div>  
  19.               <a href="#" class="zoom-out tooltip-caller"></a> </div>  
  20.             <div id="wrapper-barra-zoom" class="tooltip-content">  
  21.               <div class="tooltip">  
  22.                 <p>Zoom</p>  
  23.                 <span></span> </div>  
  24.               <div class="tooltip-caller wrapper-barra"> <span id="barra"> <strong id="scroll" class="ui-draggable" style="position: relative; left: 0px;"> </strong> </span> </div>  
  25.             </div>  
  26.             <div class="tooltip-content">  
  27.               <div class="tooltip">  
  28.                 <p>Zoom In</p>  
  29.                 <span></span> </div>  
  30.               <a href="#" class="zoom-in tooltip-caller"></a> </div>  
  31.             <div class="clear"></div>  
  32.           </div>  
  33.         </div>  
  34.         <div class="clear"></div>  
  35.       </div>  
  36.     </div>  
  37.       
  38.     <div class="content"> <a href="" id="next"></a>  
  39.       <div class="wrapper" style="width: 1415px; height: 362px;">  
  40.         <img src="img/camiseta_hombre_jackknife_negra.jpg" class="dragme">  
  41.       </div>  
  42.       <a href="" id="before"></a>  
  43.     </div>  
  44.       
  45.     <div class="footer">  
  46.       <a href="#" id="aba-lista"><span>Hide Thumbnails</span></a>  
  47.       <div id="listagem-imagens">  
  48.         <div>  
  49.             <a class="item-zoom-image ativo" href="img/camiseta_hombre_jackknife_negra.jpg" alt="0"><img src="img/camiseta_hombre_jackknife_negra-thumb.jpg"> </a>  
  50.             <a class="item-zoom-image" href="img/design.png" alt="1"><img src="img/design-thumb.png"> </a>  
  51.             <a class="item-zoom-image" href="img/camiseta_hombre_lumberjack_blanca.jpg" alt="2"> <img src="img/camiseta_hombre_lumberjack_blanca-thumb.jpg"> </a>  
  52.             <a class="item-zoom-image" href="img/camiseta_hombre_mr-speed_blanca1.jpg" alt="2"> <img src="img/camiseta_hombre_mr-speed_blanca1-thumb.jpg"> </a>  
  53.             <div class="clear"></div>  
  54.         </div>  
  55.       </div>        
  56.     </div>  
  57.       
  58.   </div>  
  59. </div>  

 


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