Based on jQuery full screen album plug-in zoomVisualizer, jquery full screen scrolling plug-in

Based on jQuery full screen album plug-in zoomVisualizer, jquery full screen scrolling plug-in

Based on the jQuery full-screen album plug-in zoomVisualizer. This is a jquery ui-based album plug-in that supports hiding and displaying album thumbnails, switching between left and right arrows, and enlarging and downgrading images. As follows:

Download Online Preview source code

Implementation code.

Html code:

<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;">                </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"> </a>            <a class="item-zoom-image" href="img/design.png" alt="1"> </a>            <a class="item-zoom-image" href="img/camiseta_hombre_lumberjack_blanca.jpg" alt="2">  </a>            <a class="item-zoom-image" href="img/camiseta_hombre_mr-speed_blanca1.jpg" alt="2">  </a>            <div class="clear"></div>        </div>      </div>          </div>      </div></div>

Via: http://www.w2bc.com/Article/42016