Archiwum tagu: jQZoom efekt lupy

jQZoom Evolution

jQZoom jest Javascriptowym pluginem do jQuery, służącym do powiększania zdjęć na stronie, czyli tworzącym efekt lupy. Obsługa wtyczki jest naprawdę prosta i może znaleźć szerokie zastosowanie w systemach e-commerce do prezentowania szczegółów produktów bez przeładowywania strony.

jquery_motor3

ZOBACZ DEMO

Po pierwsze, umieszczamy jqzoom.css w części <head>

<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />

Korzystanie jQZoom jest łatwe, ale trzeba określić HTML anchor, który będzie generować zoom ujawniając część powiększonego obrazu.

<a href="images/BIGIMAGE.JPG" class="MYCLASS"  title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"  >
</a>

Następnie załadowujemy nasz plugin.

$(document).ready(function(){
	$('.MYCLASS).jqzoom();
});

Aby stworzyć więcej niestandardowych efektów, możesz dodać więcej opcji.

$(document).ready(function(){
	var options = {
	    zoomWidth: 300,
	    zoomHeight: 250,
            xOffset: 10,
            yOffset: 0,
            position: "right" //and MORE OPTIONS
};
	$('.MYCLASS).jqzoom(options);
});

ZOBACZ TUTORIAL