WheelZoom.js

0
261
Görüntülenme

mouse-tekerleği-ile-resim-büyütme
jQuery için geliştirilmiş olan birçok resim büyütme eklentisi olduğundan az çok haberiniz vardır. Mouse ile resimleri tıklayarak yada üzerine gelerek resimleri büyüten birçok uygulama var. WheelZoom.js uygulaması da bunlardan bir tanesidir ama tıklayarak yada üzerine gelerek büyütme değil de mouse tekerleğini döndürerek resimleri büyütebiliyor. Ayrıca diz üstü bilgisayarlardaki touchpad bölümünde bulunan aşağı yukarı kaydırma bölümü kullanılarak ta resimler büyütülebiliyor.

Web sitenize eklemiş olduğunuz resimleri WheelZoom.js ile birleştirerek çok kolay bir şekilde ziyaretçilerinizin mouse tekerleğini kullanarak resimleri büyütmesini sağlayabilirsiniz. Ayrıca resimleri büyüttükten sonra mouse ile sol tuşu basılı tutarak incelemek istediğiniz bölüme doğru sürükleyebilirsiniz sürükle-bırak özelliği sayesinde. kendi çerçevesi içinde büyüdüğü için sayfanızda herhangi bir bozulmaya sebep olmuyor. Bu açıdan çok iyi düşünülmüş.

Büyütmek istediğiniz  fotoğraflara öncelikle bir id eklemeniz gerekmekte. Bildiğiniz üzere sayfa içine resim eklemek için <img src=”resimadresi.jpg” width=”” height=”” /> kodunu kullanırız.  Bu kodlara WheelZoom.js idesini yani mouse tekerleği ile döndürmeyi etkinleştirmek için kullanılan id=’wheelzoom’ kodunu eklemeniz gerekiyor. Çok fazla parametresi olan bir uygulama olmadığı için çok kolay bir şekilde kullanabilirsiniz. $(‘img’).wheelzoom();  yada yüzdelik oranda  büyütmek için $(‘img’).wheelzoom({zoom:0.05}); parametrelerini kullanabilirsiniz.

Kullanım

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

Js dosya adresleri : 

 JavaScript : 

Yüzdelik oranda büyütmek için : 

  •  Body etiketleri içine eklemeniz gereken bölüm.

Resim kodu : 

 

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.