Question

我需要一些Javascript帮助让fancybox与SCP合作。以下解决方案对我没有用，虽然我知道我缺少一些基本代码。第一个产品图像可以完美地打开fancybox灯箱，但是一旦您从可配置的下拉列表中进行选择，它就会更改图像，然后不会调用灯箱并在浏览器中打开。

SCP的建议是：要解决此问题，通常只需编辑showFullImageDiv文件中的scp_product_extension.js函数：将evalScripts更改为true（如果尚未更新），并且可能还需要删除代码它存在于以下几个地方：product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');

我试过这个，但这不仅仅是删除“product_zoom ...”的简单问题，我的理解是需要调用fancybox来替换这行代码。

原件：

Product.Config.prototype.showFullImageDiv = function(productId, parentId) {
    var imgUrl = this.config.ajaxBaseUrl + "image/?id=" + productId + '&pid=' + parentId;
    var prodForm = $('product_addtocart_form');
    var destElement = false;
    var defaultZoomer = this.config.imageZoomer;

    prodForm.select('div.product-img-box').each(function(el) {
        destElement = el;
    });

    if(productId) {
        new Ajax.Updater(destElement, imgUrl, {
            method: 'get',
            evalScripts: true,
            onComplete: function() {
                //Product.Zoom needs the *image* (not just the html source from the ajax)
                //to have loaded before it works, hence image object and onload handler
                if ($('image')){
                    var imgObj = new Image();
                    imgObj.src = $('image').src;
                    imgObj.onload = function() {product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint'); };
                } else {
                    destElement.innerHTML = defaultZoomer;
                    product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint')
                }
          }
        });
    } else {
        destElement.innerHTML = defaultZoomer;
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    }
};

我知道我需要在以下位置调用fancybox，但不知道如何去做。根据我的理解，fancybox在页面加载时被调用，所以不确定imgObj.onload是否会起作用？

Product.Config.prototype.showFullImageDiv = function(productId, parentId) {
    var imgUrl = this.config.ajaxBaseUrl + "image/?id=" + productId + '&pid=' + parentId;
    var prodForm = $('product_addtocart_form');
    var destElement = false;
    var defaultZoomer = this.config.imageZoomer;

    prodForm.select('div.product-img-box').each(function(el) {
        destElement = el;
    });

    if(productId) {
        new Ajax.Updater(destElement, imgUrl, {
            method: 'get',
            evalScripts: true,
            onComplete: function() {
                //Product.Zoom needs the *image* (not just the html source from the ajax)
                //to have loaded before it works, hence image object and onload handler
                if ($('image')){
                    var imgObj = new Image();
                    imgObj.src = $('image').src;
                    imgObj.onload = CALL FANCYBOX
                } else {
                    destElement.innerHTML = defaultZoomer;
                    CALL FANCYBOX
                }
          }
        });
    } else {
        destElement.innerHTML = defaultZoomer;
        CALL FANCYBOX
    }
};

不幸的是，我的javascript非常基本，我会非常感激地收到有关我需要添加的内容的任何帮助。我发现一些帖子有同样的问题，但没有解决方案。

由于

Fancybox不使用简单可配置产品（SCP）

0 个答案: