Alışveriş sitelerinde sıkça rastladığımız örneklerden bir tanesidir ve ürünleri incelememiz açısından oldukça faydalı olan fotoğraf büyütme uygulamalarıdır bunlar. Mouse ile resmin üzerine geldiğiniz zaman yan tarafında mousu gezdirdiğiniz bölgenin büyütülmüş hali görüntülenir adeta mercek kullanıyormuş gibi. Kendi çerçevesi içinde büyüten yada modal pencerede açan örnekler de vardır. Zoom.js uygulaması da aynı amaçla ama her web sitesi için kullanılabilir bir tane çalışmadır.

Başlıkta tıklandığında büyütmek diye bir cümle attım. Yanlış bir başlık değil aksine eksik girilmiş bir başlıktır bu. Üzerine gelince büyütme ve mouse ile resmi tutunca da fotoğraflar büyütülebiliyor. Ayrıca kendi çerçevesi içinde ve alışveriş sitelerindeki örneklerden biraz farklı olarak zoom yaptığı için her web sitesi için kullanılabilir. İncelemk için tıklatmak yerine kendi çerçevesinde mousu gezdirerek her tarafı incelemek daha kullanışlı ve ziyaretçilere de zahmet vermeyen bir özelliktir.  Jack Moore tarafından yapılmış olan bu örnek bana göre  gerçekten çok ince düşünülmüş ve eksik kalır bir tarafı yok gibi.
Kullanım

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

Stil kodları : 

	<style>
		/* styles unrelated to zoom */
		* { border:0; margin:0; padding:0; }
		p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

		/* optional icon style */
		.zoomIcon { 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(icon.png);
		}

		/* these styles are for the demo, and are not required for the plugin */
		.zoom {
			display:inline-block;
			position:relative;
		}

		.zoom img {
			display: block;
		}

		.zoom img::selection { background-color: transparent; }

		#ex2 img:hover { cursor: url(grab.cur), default; }
		#ex2 img:active { cursor: url(grabbed.cur), default; }
	</style>

Js dosya adresleri : 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script src='jquery.zoom.js'></script>

 JavaScript : 

<script>
	$(document).ready(function(){
		$('#ex1').zoom();
		$('#ex2').zoom({ on:'grab' });
		$('#ex3').zoom({ on:'click' });
	});
</script>

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

Html : 

	<span class='zoom' id='ex1'>
		<img src='daisy.jpg' id='jack' width='555' height='320' alt='Daisy on the Ohoopee'/>
		<p>Hover</p>
	</span>
	<span class='zoom' id='ex2'>
		<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
		<p>Grab</p>
	</span>
	<span class='zoom' id='ex3'>
		<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
		<p>Click</p>
	</span>