Question

我想在标准magento ce 1.9.2.1

的产品缩放功能中进行一些自定义

我在rwd默认主题的js文件夹中看到了elevatezoom子文件夹，并且有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等。但是缩放功能没有效果。

然后我修改js文件夹中的app.js文件，创建var zoomOptions {...}然后将zoomOptions传递给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);
},

...

结果然后缩放根本不起作用。

请有人帮忙，如何让这个缩放配置参数得到正确的通过，并得到预期的修改结果。

谢谢

Answer 1

这是一个古老的问题，但万一其他人迟到了......

这可以通过创建一个包含以下内容的新JS文件来完成（使用您想要的选项进行调整）：

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

此文件应添加到布局（local.xml for ex）：

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

确保在ElevateZoom JS文件后加载zoomconfig.js文件。

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

这是一种正确的方法，因为没有修改Magento文件。

Answer 2

Magento使用Minimized Javascript，因此您必须编辑此文件： ./skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js

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

2 个答案: