jquery - 需要在 Shopify 商店上降低 'Cloudzoom' 的放大倍率。

Question

将此 Cloudzoom 插件集成到我客户的 Shopify 商店中，但是我不知道如何降低放大率，也不知道该怎么做。我试过将“zoomWidth”设置为特定变量，但似乎没有任何改变。非常感谢帮助!一个 friend 提到我必须“从管理员减少缩放图像的高度和宽度”，但我不知道我正在调整哪个高度和宽度!

我希望放大倍数更细微，像这样:http://blackmilkclothing.com/collections/museum-release/products/3d-ribs-dress

Here is the link to my current site

这是脚本:

(function ($) {
$(document).ready(function () {
    $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom()
});

function format(a) {
    for (var i = 1; i < arguments.length; i++) {
        a = a.replace('%' + (i - 1), arguments[i])
    }
    return a
}
function CloudZoom(g, i) {
    var j = $('img', g);
    var k;
    var l;
    var m = null;
    var n = null;
    var o = null;
    var p = null;
    var q = null;
    var r = null;
    var s;
    var t = 0;
    var u, ch;
    var v = 0;
    var z = 0;
    var A = 0;
    var B = 0;
    var C = 0;
    var D, my;
    var E = this,
        zw;
    setTimeout(function () {
        if (n === null) {
            var w = g.width();
            g.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>', w / 3, (w / 2) - (w / 6))).find(':last').css('opacity', 0.5)
        }
    }, 200);
    var F = function () {
        if (r !== null) {
            r.remove();
            r = null
        }
    };
    this.removeBits = function () {
        if (o) {
            o.remove();
            o = null
        }
        if (p) {
            p.remove();
            p = null
        }
        if (q) {
            q.remove();
            q = null
        }
        F();
        $('.cloud-zoom-loading', g.parent()).remove()
    };
    this.destroy = function () {
        g.data('zoom', null);
        if (n) {
            n.unbind();
            n.remove();
            n = null
        }
        if (m) {
            m.remove();
            m = null
        }
        this.removeBits()
    };
    this.fadedOut = function () {
        if (m) {
            m.remove();
            m = null
        }
        this.removeBits()
    };
    this.controlLoop = function () {
        if (o) {
            var x = (D - j.offset().left - (u * 0.5)) >> 0;
            var y = (my - j.offset().top - (ch * 0.5)) >> 0;
            if (x < 0) {
                x = 0
            } else if (x > (j.outerWidth() - u)) {
                x = (j.outerWidth() - u)
            }
            if (y < 0) {
                y = 0
            } else if (y > (j.outerHeight() - ch)) {
                y = (j.outerHeight() - ch)
            }
            o.css({
                left: x,
                top: y
            });
            o.css('background-position', (-x) + 'px ' + (-y) + 'px');
            v = (((x) / j.outerWidth()) * s.width) >> 0;
            z = (((y) / j.outerHeight()) * s.height) >> 0;
            B += (v - B) / i.smoothMove;
            A += (z - A) / i.smoothMove;
            m.css('background-position', (-(B >> 0) + 'px ') + (-(A >> 0) + 'px'))
        }
        t = setTimeout(function () {
            E.controlLoop()
        }, 30)
    };
    this.init2 = function (a, b) {
        C++;
        if (b === 1) {
            s = a
        }
        if (C === 2) {
            this.init()
        }
    };
    this.init = function () {
        $('.cloud-zoom-loading', g.parent()).remove();
        n = g.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", j.outerWidth(), j.outerHeight(), 0, 0)).find(':last');
        n.bind('mousemove', this, function (a) {
            D = a.pageX;
            my = a.pageY
        });
        n.bind('mouseleave', this, function (a) {
            clearTimeout(t);
            if (o) {
                o.fadeOut(299)
            }
            if (p) {
                p.fadeOut(299)
            }
            if (q) {
                q.fadeOut(299)
            }
            m.fadeOut(300, function () {
                E.fadedOut()
            });
            return false
        });
        n.bind('mouseenter', this, function (a) {

            D = a.pageX;
            my = a.pageY;
            zw = a.data;
            if (m) {
                m.stop(true, false);
                m.remove()
            }
            var b = i.adjustX,
                yPos = i.adjustY;
            var c = j.outerWidth();
            var d = j.outerHeight();
            var w = i.zoomWidth;
            var h = i.zoomHeight;
            if (i.zoomWidth == 'auto') {
                w = c
            }
            if (i.zoomHeight == 'auto') {
                h = d
            }
            var e = g.parent();
            switch (i.position) {
                case 'top':
                    yPos -= h;
                    break;
                case 'right':
                    b += c;
                    break;
                case 'bottom':
                    yPos += d;
                    break;
                case 'left':
                    b -= w;
                    break;
                case 'inside':
                    w = c;
                    h = d;
                    break;
                default:
                    e = $('#' + i.position);
                    if (!e.length) {
                        e = g;
                        b += c;
                        yPos += d
                    } else {
                        w = e.innerWidth();
                        h = e.innerHeight()
                    }
            }
            m = e.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>', b, yPos, w, h, s.src)).find(':last');
            if (j.attr('title') && i.showTitle) {
                m.append(format('<div class="cloud-zoom-title">%0</div>', j.attr('title'))).find(':last').css('opacity', i.titleOpacity)
            }
            if ($.browser.msie && $.browser.version < 7) {
                r = $('<iframe frameborder="0" src="#"></iframe>').css({
                    position: "absolute",
                    left: b,
                    top: yPos,
                    zIndex: 99,
                    width: w,
                    height: h
                }).insertBefore(m)
            }
            m.fadeIn(500);
            if (o) {
                o.remove();
                o = null
            }
            u = (j.outerWidth() / s.width) * m.width();
            ch = (j.outerHeight() / s.height) * m.height();
            o = g.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>", u, ch)).find(':last');
            n.css('cursor', o.css('cursor'));
            var f = false;
            if (i.tint) {
                o.css('background', 'url("' + j.attr('src') + '")');
                p = g.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />', j.outerWidth(), j.outerHeight(), i.tint)).find(':last');
                p.css('opacity', i.tintOpacity);
                f = true;
                p.fadeIn(500)
            }
            if (i.softFocus) {
                o.css('background', 'url("' + j.attr('src') + '")');
                q = g.append(format('<div style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />', j.outerWidth() - 2, j.outerHeight() - 2, i.tint)).find(':last');
                q.css('background', 'url("' + j.attr('src') + '")');
                q.css('opacity', 0.5);
                f = true;
                q.fadeIn(500)
            }
            if (!f) {
                o.css('opacity', i.lensOpacity)
            }
            if (i.position !== 'inside') {
                o.fadeIn(500)
            }
            zw.controlLoop();
            return
        })
    };
    k = new Image();
    $(k).load(function () {
        E.init2(this, 0)
    });
    k.src = j.attr('src');
    l = new Image();
    $(l).load(function () {
        E.init2(this, 1)
    });
    l.src = g.attr('href')
}
$.fn.CloudZoom = function (d) {
    try {
        document.execCommand("BackgroundImageCache", false, true)
    } catch (e) {}
    this.each(function () {
        var c, opts;
        eval('var    a = {' + $(this).attr('rel') + '}');
        c = a;
        if ($(this).is('.cloud-zoom')) {
            $(this).css({
                'position': 'relative',
                'display': 'block'
            });
            $('img', $(this)).css({
                'display': 'block'
            });
            if ($(this).parent().attr('id') != 'wrap') {
                $(this).wrap('<div id="wrap" style="top:0px;z-index:9999;position:relative;"></div>')
            }
            opts = $.extend({}, $.fn.CloudZoom.defaults, d);
            opts = $.extend({}, opts, c);
            $(this).data('zoom', new CloudZoom($(this), opts))
        } else if ($(this).is('.cloud-zoom-gallery')) {
            opts = $.extend({}, c, d);
            $(this).data('relOpts', opts);
            $(this).bind('click', $(this), function (a) {
                var b = a.data.data('relOpts');
                $('#' + b.useZoom).data('zoom').destroy();
                $('#' + b.useZoom).attr('href', a.data.attr('href'));
                $('#' + b.useZoom + ' img').attr('src', a.data.data('relOpts').smallImage);
                $('#' + a.data.data('relOpts').useZoom).CloudZoom();
                return false
            })
        }
    });
    return this
};
$.fn.CloudZoom.defaults = {
    zoomWidth: 'auto',
    zoomHeight: 'auto',
    position: 'right',
    tint: false,
    tintOpacity: 0.5,
    lensOpacity: 0.5,
    softFocus: false,
    smoothMove: 3,
    showTitle: true,
    titleOpacity: 0.5,
    adjustX: 0,
    adjustY: 0
}
})(jQuery);

Answer 1

您的 friend 听起来他们走在正确的轨道上。在您的站点上，缩放图像的高度为 2048 像素，而在您正在处理的示例中，缩放图像的高度为 1024 像素。

您需要减小缩放图像的大小，方法是实际使用较小的图像或使用 CSS 调整其大小。您也可以尝试 maxMagnification属性，但我自己还没有测试过。