8. 第八週圖像縮放器

一、官網：http://zoomsl.sergeland.ru/example/

http://zoomsl.sergeland.ru/images/fashion-054.jpg

二、安裝：

JAVASCRIPT
引入 zoomsl-3.0.js ，必須放在jquery.js的後面


    <script src="class/zoomer/zoomsl-3.0.min.js"></script>


    <script>
       jQuery(function(){

          $(".my-foto").imagezoomsl({
             zoomrange: [1, 12],
             zoomstart: 4,
             innerzoom: true,
             magnifierborder: "none"
          });
       });
    </script>

HTML


    <div class="container">
      <div class="row">
        <div class="col-md-6 big-caption text-center">
          <!-- .zoom -->
          <img class="my-foto img-responsive" src="images/show1.jpg" data-large="images/show1.jpg" data-title="show1" data-help="滑鼠滾輪 +/-" data-text-bottom="2013/14 / 商品名稱： <span style='text-decoration:underline;color:#CC3300;'>show1</span>" alt=""  style="max-height:500px;" />

        </div>
        <div class="col-md-6">

        </div>
      </div>
    </div>