woocommerce/assets/js/zoom/jquery.zoom.js

243 lines
5.8 KiB
JavaScript
Raw Normal View History

Add/product galleries (#11665) * register prettyPhoto but don't enqueue. #10721 * Remove lightbox option. #10721 Also registers the prettyPhoto styles instead of enqueueing * Stip all prettyPhoto related stuff from the templates and tidy up some logic. #10721 * Add flexslider assets #10721 * styling and re-adds `woocommerce_single_product_image_thumbnail_html`. #10721. * Add zoom functionality. #10721 * Move js to single-product.js. #10721 * styling of the gallery thumbnails when using the `product_page` shortcode. #10721 * Only enable the zoom if the image is large enough. #10721 * Use a 4 column layout by default. #10721 * Make the carousel options filterable. #10721 * rtl styles for gallery. #10721 * Don't zoom on handheld devices. #10721 * markup tweaks in prep for photoswipe * disable zoom for now * Add and enqueue photoswipe assets * add the photoswipe template * initialise photoswipe - it's alive! * tidy up js. add title. add separate trigger. #10721 * Move photoswipe functions to single-product.js. #10721 * reactivate the zoom! #10721 * style the photoswipe trigger. #10721 * disable flexslider animation loop. #10721 * js tidy up. #10721 * Fix jshint * Abstract the product gallery scripts * Minify * Fixed conflict with the admin bar * Photoswipe conflict with admin bar * Index. #10721 * photoswipe button styles. #10721 * Styling. #10721 * No animation on zoom * Image width on mobile * No shadows please. #10721 Looking at you, Twenty Twelve. * code tidy and add class to placeholder figure. #10721 * simplify rtl query * photoswipe button styles * Comma should not be here * zoom icon #10721 * gallery thumb styles. #10721 * trigger icon. #10721 * Image margins. #10721 * icon hover states. #10721 * Variation handling * Fix zoom and heights * Resize after timeout
2016-10-13 14:25:42 +00:00
/*!
Zoom 1.7.15
license: MIT
http://www.jacklmoore.com/zoom
*/
(function ($) {
var defaults = {
url: false,
callback: false,
target: false,
duration: 120,
on: 'mouseover', // other options: grab, click, toggle
touch: true, // enables a touch fallback
onZoomIn: false,
onZoomOut: false,
magnify: 1
};
// Core Zoom Logic, independent of event listeners.
$.zoom = function(target, source, img, magnify) {
var targetHeight,
targetWidth,
sourceHeight,
sourceWidth,
xRatio,
yRatio,
offset,
$target = $(target),
position = $target.css('position'),
$source = $(source);
// The parent element needs positioning so that the zoomed element can be correctly positioned within.
$target.css('position', /(absolute|fixed)/.test(position) ? position : 'relative');
$target.css('overflow', 'hidden');
img.style.width = img.style.height = '';
$(img)
.addClass('zoomImg')
.css({
position: 'absolute',
top: 0,
left: 0,
opacity: 0,
width: img.width * magnify,
height: img.height * magnify,
border: 'none',
maxWidth: 'none',
maxHeight: 'none'
})
.appendTo(target);
return {
init: function() {
targetWidth = $target.outerWidth();
targetHeight = $target.outerHeight();
if (source === $target[0]) {
sourceWidth = targetWidth;
sourceHeight = targetHeight;
} else {
sourceWidth = $source.outerWidth();
sourceHeight = $source.outerHeight();
}
xRatio = (img.width - targetWidth) / sourceWidth;
yRatio = (img.height - targetHeight) / sourceHeight;
offset = $source.offset();
},
move: function (e) {
var left = (e.pageX - offset.left),
top = (e.pageY - offset.top);
top = Math.max(Math.min(top, sourceHeight), 0);
left = Math.max(Math.min(left, sourceWidth), 0);
img.style.left = (left * -xRatio) + 'px';
img.style.top = (top * -yRatio) + 'px';
}
};
};
$.fn.zoom = function (options) {
return this.each(function () {
var
settings = $.extend({}, defaults, options || {}),
//target will display the zoomed image
target = settings.target || this,
//source will provide zoom location info (thumbnail)
source = this,
$source = $(source),
$target = $(target),
img = document.createElement('img'),
$img = $(img),
mousemove = 'mousemove.zoom',
clicked = false,
touched = false,
$urlElement;
// If a url wasn't specified, look for an image element.
if (!settings.url) {
$urlElement = $source.find('img');
if ($urlElement[0]) {
settings.url = $urlElement.data('src') || $urlElement.attr('src');
}
if (!settings.url) {
return;
}
}
(function(){
var position = $target.css('position');
var overflow = $target.css('overflow');
$source.one('zoom.destroy', function(){
$source.off(".zoom");
$target.css('position', position);
$target.css('overflow', overflow);
$img.remove();
});
}());
img.onload = function () {
var zoom = $.zoom(target, source, img, settings.magnify);
function start(e) {
zoom.init();
zoom.move(e);
// Skip the fade-in for IE8 and lower since it chokes on fading-in
// and changing position based on mousemovement at the same time.
$img.stop()
.fadeTo($.support.opacity ? settings.duration : 0, 1, $.isFunction(settings.onZoomIn) ? settings.onZoomIn.call(img) : false);
}
function stop() {
$img.stop()
.fadeTo(settings.duration, 0, $.isFunction(settings.onZoomOut) ? settings.onZoomOut.call(img) : false);
}
// Mouse events
if (settings.on === 'grab') {
$source
.on('mousedown.zoom',
function (e) {
if (e.which === 1) {
$(document).one('mouseup.zoom',
function () {
stop();
$(document).off(mousemove, zoom.move);
}
);
start(e);
$(document).on(mousemove, zoom.move);
e.preventDefault();
}
}
);
} else if (settings.on === 'click') {
$source.on('click.zoom',
function (e) {
if (clicked) {
// bubble the event up to the document to trigger the unbind.
return;
} else {
clicked = true;
start(e);
$(document).on(mousemove, zoom.move);
$(document).one('click.zoom',
function () {
stop();
clicked = false;
$(document).off(mousemove, zoom.move);
}
);
return false;
}
}
);
} else if (settings.on === 'toggle') {
$source.on('click.zoom',
function (e) {
if (clicked) {
stop();
} else {
start(e);
}
clicked = !clicked;
}
);
} else if (settings.on === 'mouseover') {
zoom.init(); // Preemptively call init because IE7 will fire the mousemove handler before the hover handler.
$source
.on('mouseenter.zoom', start)
.on('mouseleave.zoom', stop)
.on(mousemove, zoom.move);
}
// Touch fallback
if (settings.touch) {
$source
.on('touchstart.zoom', function (e) {
e.preventDefault();
if (touched) {
touched = false;
stop();
} else {
touched = true;
start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
}
})
.on('touchmove.zoom', function (e) {
e.preventDefault();
zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
})
.on('touchend.zoom', function (e) {
e.preventDefault();
if (touched) {
touched = false;
stop();
}
});
}
if ($.isFunction(settings.callback)) {
settings.callback.call(img);
}
};
img.src = settings.url;
});
};
$.fn.zoom.defaults = defaults;
}(window.jQuery));