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(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');
}
});
});