1
Я хотел бы сделать некоторые настройки в продукте функции масштабирования стандартного Magento CE 1.9.2.1Как настроить функцию масштабирования продукта в стандартном magento ce 1.9.2?
Я вижу elevatezoom вложенной папки в папке JS RWD темы по умолчанию, и есть jquery.elevatezoom.js файл, который содержит параметры конфигурации ближе к концу файла, как показано ниже:
enter code here
......
$.fn.elevateZoom.options = {
zoomActivation: "hover", // Can also be click (PLACEHOLDER FOR NEXT VERSION)
zoomEnabled: true, //false disables zoomwindow from showing
preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)
zoomLevel: 1, //default zoom level of image
scrollZoom: true, //allow zoom on mousewheel, true to activate
scrollZoomIncrement: 0.1, //steps of the scrollzoom
minZoomLevel: false,
maxZoomLevel: false,
easing: true,
easingAmount: 12,
lensSize: 100,
zoomWindowWidth: 300,
zoomWindowHeight: 400,
zoomWindowOffetx: 10,
zoomWindowOffety: 0,
zoomWindowPosition: 1,
zoomWindowBgColour: "#fff",
lensFadeIn: 500,
lensFadeOut: 500,
debug: false,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500,
zoomWindowAlwaysShow: false,
zoomTintFadeIn: false,
zoomTintFadeOut: false,
borderSize: 4,
showLens: true,
borderColour: "#888",
lensBorderSize: 1,
lensBorderColour: "#000",
lensShape: "square", //can be "round"
zoomType: "window", //window is default, also "lens" available -
containLensZoom: false,
lensColour: "white", //colour of the lens background
lensOpacity: 0.4, //opacity of the lens
lenszoom: false,
tint: false, //enable the tinting
tintColour: "#333", //default tint color, can be anything, red, #ccc, rgb(0,0,0)
tintOpacity: 0.4, //opacity of the tint
gallery: false,
galleryActiveClass: "zoomGalleryActive",
imageCrossfade: false,
constrainType: false, //width or height
constrainSize: false, //in pixels the dimensions you want to constrain on
loadingIcon: false, //http://www.example.com/spinner.gif
cursor:"default", // user should set to what they want the cursor as, if they have set a click function
responsive:true,
onComplete: $.noop,
onZoomedImageLoaded: function() {},
onImageSwap: $.noop,
onImageSwapComplete: $.noop
;
})(jQuery, window, document);
Я сделал некоторые изменения в параметре опции, такие как lenSize, zoomWindowHeight etc..but нет никакого эффекта в функции масштабирования.
Тогда я изменяющий app.js файла в папке JS, создавая вар zoomOptions {...} затем передать zoomOptions Into image.elevatezoom() как код snipet ниже:
enter code here
// ==============================================
// PDP - image zoom - needs to be available outside document.ready scope
// ==============================================
var ProductMediaManager = {
IMAGE_ZOOM_THRESHOLD: 20,
imageWrapper: null,
destroyZoom: function() {
$j('.zoomContainer').remove();
$j('.product-image-gallery .gallery-image').removeData('elevateZoom');
},
var ZoomOptions = {
// set tint background
tint:true,
tintColour:'#F90',
tintOpacity:0.5,
// Size
lensSize: 100,
zoomWindowHeight: 300,
zoomWindowWidth: 400,
borderSize: 0,
// Position
zoomWindowOffetx: 10,
zoomWindowOffety: 0,
// Additional settings for Zoomer positioning.
// zoomWindowPosition: 1,
// zoomType: "inner",
// Fade-in speed settings
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500,
lensFadeIn: 500,
lensFadeOut: 500,
// Ability to zoom by using the mouse scroll.
scrollZoom : true,
// inertia - my favorite one
easing: true
},
createZoom: function(image) {
// Destroy since zoom shouldn't be enabled under certain conditions
ProductMediaManager.destroyZoom();
if(
// Don't use zoom on devices where touch has been used
PointerManager.getPointer() == PointerManager.TOUCH_POINTER_TYPE
// Don't use zoom when screen is small, or else zoom window shows outside body
|| Modernizr.mq("screen and (max-width:" + bp.medium + "px)")
) {
return; // zoom not enabled
}
if(image.length <= 0) { //no image found
return;
}
if(image[0].naturalWidth && image[0].naturalHeight) {
var widthDiff = image[0].naturalWidth - image.width() - ProductMediaManager.IMAGE_ZOOM_THRESHOLD;
var heightDiff = image[0].naturalHeight - image.height() - ProductMediaManager.IMAGE_ZOOM_THRESHOLD;
if(widthDiff < 0 && heightDiff < 0) {
//image not big enough
image.parents('.product-image').removeClass('zoom-available');
return;
} else {
image.parents('.product-image').addClass('zoom-available');
}
}
image.elevateZoom(ZoomOptions);
},
......
в результате то зум не работает вообще.
Пожалуйста, помогите кому-нибудь, как получить этот параметр конфигурации масштабирования, пройти правильно и получить ожидаемое изменение.
Спасибо