基于jQuery全屏相册插件zoomVisualizer

基于jQuery全屏相册插件zoomVisualizer。这是一款基于jquery ui实现的相册插件，支持隐藏显示相册缩略图，支持左右箭头切换图片，支持放大缩及缩小图片。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div id="zoom-visualizer"> <div class="lightbox-ofertas-bg"></div> <div class="lightbox">  <div class="header">   <div class="inside">    <div id="wrapper-fechar" class="tooltip-content">     <div class="tooltip">      <p>Close</p>      <span></span> </div>     <a href="" class="fechar tooltip-caller"></a>     <div class="clear"></div>    </div>    <div id="zoom">     <div>      <div class="tooltip-content">       <div class="tooltip">        <p>Zoom Out</p>        <span></span> </div>       <a href="#" class="zoom-out tooltip-caller"></a> </div>      <div id="wrapper-barra-zoom" class="tooltip-content">       <div class="tooltip">        <p>Zoom</p>        <span></span> </div>       <div class="tooltip-caller wrapper-barra"> <span id="barra"> <strong id="scroll" class="ui-draggable" style="position: relative; left: 0px;"> </strong> </span> </div>      </div>      <div class="tooltip-content">       <div class="tooltip">        <p>Zoom In</p>        <span></span> </div>       <a href="#" class="zoom-in tooltip-caller"></a> </div>      <div class="clear"></div>     </div>    </div>    <div class="clear"></div>   </div>  </div>    <div class="content"> <a href="" id="next"></a>   <div class="wrapper" style="width: 1415px; height: 362px;">     <img src='/images/loading.gif' data-original="img/camiseta_hombre_jackknife_negra.jpg" class="dragme">   </div>   <a href="" id="before"></a>  </div>    <div class="footer">   <a href="#" id="aba-lista"><span>Hide Thumbnails</span></a>   <div id="listagem-imagens">    <div>      <a class="item-zoom-image ativo" href="img/camiseta_hombre_jackknife_negra.jpg" ><img src='/images/loading.gif' data-original="img/camiseta_hombre_jackknife_negra-thumb.jpg"> </a>      <a class="item-zoom-image" href="img/design.png" ><img src='/images/loading.gif' data-original="img/design-thumb.png"> </a>      <a class="item-zoom-image" href="img/camiseta_hombre_lumberjack_blanca.jpg" > <img src='/images/loading.gif' data-original="img/camiseta_hombre_lumberjack_blanca-thumb.jpg"> </a>      <a class="item-zoom-image" href="img/camiseta_hombre_mr-speed_blanca1.jpg" > <img src='/images/loading.gif' data-original="img/camiseta_hombre_mr-speed_blanca1-thumb.jpg"> </a>      <div class="clear"></div>    </div>   </div>     </div>   </div></div>

via：http://www.w2bc.com/Article/42016

原标题：基于jQuery全屏相册插件zoomVisualizer

关键词：jquery