基于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="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