基于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="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" alt="0"><img src="img/camiseta_hombre_jackknife_negra-thumb.jpg"> </a>
            <a class="item-zoom-image" href="img/design.png" alt="1"><img src="img/design-thumb.png"> </a>
            <a class="item-zoom-image" href="img/camiseta_hombre_lumberjack_blanca.jpg" alt="2"> <img src="img/camiseta_hombre_lumberjack_blanca-thumb.jpg"> </a>
            <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>
            <div class="clear"></div>
        </div>
      </div>      
    </div>
    
  </div>
</div>

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

在线预览    源码下载