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 :
<script src='/js/jquery.js'></script> <script src='/js/jquery.wheelzoom.js'></script>
JavaScript :
<script>
$('#wheelzoom').wheelzoom();
</script>
Yüzdelik oranda büyütmek için :
<script>
$('img').wheelzoom({zoom:0.05});
</script>
- Body etiketleri içine eklemeniz gereken bölüm.
Resim kodu :
<img id='wheelzoom' src='resim.jpg' width='555' height='320' alt='resim başlığı'/>