Tahák k tvorbě webů

jQuery

Zoomování obrázku

Potřebuji plugin jQuery Zoom.

Následující kód zvětší obrázek při najetí myši, ale jen v případě, že je fyzická velikost obrázku větší než velikost při zobrazení. Callback funkce propaguje kliknutí na obrázek do jeho rodičovského odkazu, takže stále funguje např. lightbox.

jQuery kód

jQuery(document).ready(function() {
	jQuery('#img-wrapper').map(function() {
		var $img = jQuery(this).find('img');

		var origWidth  = $img.attr('width');
		var origHeight = $img.attr('height');
		var viewWidth  = $img[0].clientWidth;
		var viewHeight = $img[0].clientHeight;

		if (origWidth > viewWidth || origHeight > viewHeight) {
			jQuery(this).zoom({
				callback: function() {
					jQuery(this).on('click', function() {
						jQuery(this).offsetParent().find('a').trigger('click');
					});
				},
				onZoomIn: function() {
					$img.css('visibility', 'hidden');
				},
				onZoomOut: function() {
					$img.css('visibility', 'visible');
				}
			});
			console.log('Zoom activated');
		}
		else {
			console.log('Zoom not available');
		}
	});
});