jQuery响应式图片相册可放大缩小图片相册展示插件

jQuery响应式图片相册可放大缩小图片相册展示插件

1. 引入CSS

<link rel="stylesheet" media="screen" type="text/css" href="zoom-visualizer.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/ZoomVisualizer.js"></script>

3. HTML代码

<!--<h1>jQuery zoomVisualizer Plugin Demo</h1>-->
<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>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到