Function 如何在标准magento ce 1.9.2中自定义产品缩放功能？

我想在标准magento ce 1.9.2.1的产品缩放功能中进行一些定制

我在rwd默认主题的js文件夹中看到了ElevateToom子文件夹，其中有jquery.elevateToom.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等，但在缩放功能中没有任何效果

然后我修改js文件夹中的app.js文件，创建var zoomOptions{…}，然后将zoomOptions传递到image.elevateToom（）中，代码如下：

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:函数（图像）{
//销毁，因为在某些情况下不应启用缩放
ProductMediaManager.destroyZoom（）；
如果(
//不要在使用触摸的设备上使用缩放
PointerManager.getPointer（）==PointerManager.TOUCH\u POINTER\u类型
//屏幕很小时不要使用缩放，否则缩放窗口会显示身体外部
||modernizer.mq（“屏幕和（最大宽度：“+bp.medium+”px）”）
) {
return；//未启用缩放
}
如果（image.length这是一个老问题，但万一以后有人来

这可以通过创建一个包含以下内容的新JS文件来实现（使用所需的选项进行调整）：

应将此文件添加到布局中（对于ex，为local.xml）：


[...]
skin_jsjs/zoomconfig.js
[...]

确保您的
zoomconfig.js
文件在提升ZoomJS文件之后加载

这样，默认的ElevateToom选项将被您的选项覆盖

这是一个正确的方法，因为Magento文件都没有被修改。
这是一个老问题，但万一以后有人来

这可以通过创建一个包含以下内容的新JS文件来实现（使用所需的选项进行调整）：

应将此文件添加到布局中（对于ex，为local.xml）：


[...]
skin_jsjs/zoomconfig.js
[...]

确保您的
zoomconfig.js
文件在提升ZoomJS文件之后加载

这样，默认的ElevateToom选项将被您的选项覆盖

这是一种正确的方法，因为没有修改任何Magento文件。
Magento使用最小化的Javascript，因此您必须编辑此文件：
./skin/frontend/rwd/default/js/lib/elevateToom/jquery.elevateToom-3.0.8.min.js
Magento使用最小化的Javascript，因此您必须编辑此文件：
./skin/frontend/rwd/default/js/lib/elevateToom/jquery.elevateToom-3.0.8.min.js

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);
},

var zoomOptions = {
    zoomWindowWidth: 420,
    zoomWindowHeight: 365,
    zoomWindowPosition: 3
};
for (var attrname in zoomOptions) {
    $j.fn.elevateZoom.options[attrname] = zoomOptions[attrname];
}

<catalog_product_view>
    [...]
    <reference name="head">
        <action method="addItem"><type>skin_js</type><script>js/zoomconfig.js</script></action>
    </reference>
    [...]
</catalog_product_view>