PanZoom – Fotoğraf büyütme-küçültme uygulaması

Sitenizdeki herhangi bir  resmi ziyaretçilerinizin büyüterek inceleyebilmesi için  hazırlanmış   çok güzel bir uygulama. Resmi  sadece  büyütmekle  kalmayıp sürükle bırak özelliği sayesinde  mouse  ile resmi tutup  sürükleme  imkanı da sağlıyor. Web sitenizdeki ziyaretçiler  incelemek istedikleri fotoğrafları PanZoom uygulaması ile  X14 kat  büyüterek  resmin her tarafını  detaylı bir şekilde inceleyebilirler. X14 kat fotoğraflar  büyüyeceği için ister istemez ekranı taşıyor. Bu yüzden drag and drop yani sürükle bırak özelliği de eklenmiş uygulamaya.

Timmy Willison tarafından geliştirilen  jQuery PanZoom uygulamasında fotoğrafları büyütmek ve küçültmekte  kullanılan butonlar için tam anlamıyla düzgün bir tasarım hazırlanmamış. Siz kendi zevkinize ve sitenizin tasarımına  uygun  butonlar   ekleyerek daha  çekici hale getirebilirsiniz. Ayrıca   – ve + işaretleri  arasında kalan kaydırma çubuğunu kaydırarak ta resimleri büyütüp küçültebilirsiniz. 

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri : 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/js/plugins/jquery.panzoom.js"></script>

 JavaScript : 

    <script>
      $("#panzoom").panzoom({
        $zoomIn: $(".zoom-in"),
        $zoomOut: $(".zoom-out"),
        $zoomRange: $(".zoom-range"),
        $reset: $(".reset")
      });
    </script>

•  Body etiketleri arasına eklemeniz gereken bölümler.

Html : 

    <section>
      <div id="panzoom" style="text-align: center">
        <img src="https://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900">
      </div>
    </section>
    <section class="buttons">
      <button class="zoom-in">Zoom In</button>
      <button class="zoom-out">Zoom Out</button>
      <input type="range" class="zoom-range">
      <button class="reset">Reset</button>
    </section>