基于jQuery全屏相册插件zoomVisualizer

时间:2024-03-26 18:38:08

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

基于jQuery全屏相册插件zoomVisualizer

在线预览   源码下载

实现的代码。

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