Zoom ImageMachine stopped working.

[Protos]

I just discovered that my zoom function js-main-image-zoom stopped working. May be when I tweaked ImageMachine and deferred scripts in mm9.13_template_changes.


Example http://www.cigarrummet.com/produkt/CU700T4.html

The script functions well on QuickView page but not on PROD page

"http://www.cigarrummet.com/produkt/CU700T4.html?show=quickview"

Thanksome for any ideas

André aka Protos at Cigarrummet.

[Leanne]

In your Product Display Layout Image Machine settings, change var gallery = [], to window.gallery = [], and see if that fixes it.

[Protos]

Thanks! I tried. Cleaned cache. But it didn´t fix it. Will give it another try on my DEV. Thanksome for other ideas. Maybe Matt Z. has advice to give?
Thiis must have happened Before to others?

[Protos]

Hi again, I compared my IronWool script against the one in 9.13.0.0 Templates changes in

Product Display Layout Image Machine settings-
The first lines are Iron sppecial but the rest differs slightly. Do I dare to insert general script or is it theme special?

<mvt:assign name="l.settings:clean:product:name" value="glosub(l.settings:product:name, asciichar(39), '&#39;')" />
var window.gallery = [],
<!-- or gallery. Leannes suggestion, thanks Leanne-->
thumbnailIndex = 0;
<!---start of general

Product Display Layout Image Machine settings,-->

ImageMachine.prototype.ImageMachine_Generate_Thumb nail = function (thumbnail_image, main_image, closeup_image, type_code) {
var thumbnail,
img;

thumbnail = document.createElement('div');
thumbnail.className = 'column one-third medium-one-fourth';
thumbnail.setAttribute('data-index', thumbnailIndex++);

if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
img = document.createElement('img');
img.src = thumbnail_image;
thumbnail.appendChild(img);
};
gallery.push({
src: closeup_image,
title: '&mvt:clean:product:name;'
});
return thumbnail;
};

Or can I use the script from

https://www.miva.com/mm9.13_template_changes.html Image Machine settings

Summer greetings from Sweden. André

[Matt Zimmermann]

Hi André,

Iron & Wool does have a custom version of the Image Machine code, so you would use that version with the change Leanne mentioned:

<mvt:assign name="l.settings:clean:product:name" value="glosub(l.settings:product:name, asciichar(39), '&#39;')" />
var window.gallery = [];
var thumbnailIndex = 0;

ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
    var thumbnail;
    var img;

    thumbnail = document.createElement('div');
    thumbnail.className = 'column one-third medium-one-fourth';
    thumbnail.setAttribute('data-index', thumbnailIndex++);

    if (typeof (thumbnail_image) == 'string' && thumbnail_image.length > 0) {
        img = document.createElement('img');
        img.src = thumbnail_image;
        thumbnail.appendChild(img);
    }

    if (typeof (closeup_image) == 'string' && closeup_image.length > 0) {
        gallery.push({
            src: closeup_image,
            title: '&mvt:clean:product:name;'
        });
    }

    return thumbnail;
};

[Protos]

Thanks Matt and Leanne. Pasted the code, cleaned cashe but alas no change and no zoom :-(… I think I will let it rest for a while and do some Netflix instead. In console I see some errors - does it say anuytning to you?

1. SCRIPT5009: SCRIPT5009: 'gallery' is not defined
   all-js.php (8,797)
2. 
   6
   SCRIPT5009: 'gallery' is not defined
   all-js.php (7,796)

[Matt Zimmermann]

Hi André,

Here is an untested version of the Iron & Wool Image Machine code, it is based on what I used in Colossus.

var thumbnailIndex = 0;
var gallery = [];
var productName = '&mvte:product:name;';
var cleanProductName = productName.replace(/'/g, ''');

ImageMachine.prototype.oninitialize = function (data) {
    gallery = [];
    thumbnailIndex = 0;
    this.Initialize(data);
};


ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
    var img;
    var thumbnail;

    thumbnail = document.createElement('div');
    thumbnail.className = 'column one-third medium-one-fourth';
    thumbnail.setAttribute('data-index', thumbnailIndex++);

    if (typeof (thumbnail_image) == 'string' && thumbnail_image.length > 0) {
        img = document.createElement('img');
        img.src = thumbnail_image;
        img.setAttribute('alt', cleanProductName);
        img.setAttribute('itemprop', 'thumbnail');
        thumbnail.appendChild(img);
    }

    if (typeof (closeup_image) == 'string' && closeup_image.length > 0) {
        gallery.push({
            src: closeup_image,
            title: cleanProductName
        });
    }

    return thumbnail;
};

[Protos]

Hi and thanks. No result. The funny thing is that zoom functions well in QuickView pop-up. I enclose the Picture as a proof….

<span data-icon="T" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/00000001/cu700t3_3q.jpg" alt="Quasar Cutter Two-In-One gunmetal" title="Quasar Cutter Two-In-One gunmetal" id="js-main-image" data-image="graphics/00000001/cu700t3_3q.jpg"></span>

[Matt Zimmermann]

Hi André,

Hmm, in this case, try changing var gallery = []; to window.gallery = []; without the var.

[Protos]

YES, it works!!!!!!!!!!!!!!!!!!!!!!!!! Thanks for taking the time. Wow, I nearly gave up on it! Incredible. Ha! Cheers from Sweden.