https://qjj.com.au/content/magiczoomplus/magiczoomplus.stencil.js

1function mtLinkFile(url) {
2    var extention = url.replace(/^.+\.([^.]+)$/, '$1'),
3        targetTag = document.getElementsByTagName('head')[0];
4    if (extention == 'js') {
5        var scriptTag = document.createElement('script');
6        scriptTag.type = 'text/javascript';
7        scriptTag.src = url;
8        scriptTag.async = false;
9        if (arguments.length > 1) {
10            scriptTag.onload = arguments[1];
11        }
12        targetTag.appendChild(scriptTag);
13    }
14    if (extention == 'css') {
15        var linkTag = document.createElement('link');
16        linkTag.type = 'text/css';
17        linkTag.href = url;
18        linkTag.rel = 'stylesheet';
19        linkTag.media = 'screen';
20        targetTag.appendChild(linkTag);
21    }
22}
23
24
25mtLinkFile('/content/magiczoomplus/magiczoomplus.settings.js');
26mtLinkFile('/content/magiczoomplus/magiczoomplus.js');
27
28if (typeof jQuery == 'undefined') {
29    mtLinkFile('https://code.jquery.com/jquery-3.3.1.min.js');
30}
31
32mzpScriptsReady(function() {
33    mtLinkFile('/content/magiczoomplus/magiczoomplus.css');
34    mtLinkFile('/content/magiczoomplus/magiczoomplus.stencil.css');
35    initMagicZoomPlus();
36})
37
38var $mzp_firstImageIsVideo = false;
39
40function mzpScriptsReady(fnc) {
41    if (typeof MagicZoom == 'undefined' || typeof mzOptions == 'undefined' || typeof jQuery == 'undefined') {
42        setTimeout(function() {
43            mzpScriptsReady(fnc);
44        }, 250);
45        return;
46    }
47    arguments[0]();
48}
49
50
51function initSirv() {
52    var SirvProductID = jQuery('input[name="product_id"]').val(),
53        SirvProductSKU = BCData.product_attributes.sku;
54    if (SirvID == '') return;
55
56    var spinURL = document.location.protocol.replace('file:', 'http:') + '//' + SirvID + '.sirv.com/' + SirvSpinsPath.replace(/{product\-id}/g, SirvProductID).replace(/{product\-sku}/g, SirvProductSKU);
57
58    jQuery.ajax({
59        url: spinURL,
60        dataType: "jsonp",
61        cache: true,
62        timeout: 8000,
63        error: function(data) {},
64        success: function(data) {
65
66            jQuery('div[data-slide-id="zoom"]').after('<div style="display:none;" data-slide-id="spin"><div class="Sirv" id="sirv-spin" data-src="' + spinURL + '"></div></div>');
67
68            jQuery('.MagicZoomSelectors').addClass('sirv-enabled').show().append('<a data-slide-id="spin" class="SirvIcon mz-thumb" href="#"><img id="SirvIcon" src="' + SirvIconURL + '"/></a>');
69
70            jQuery('.MagicZoomSelectors a[data-zoom-id]').first().addClass('active-magic-selector');
71
72            initMagicZoomPlusSelectors('a[data-slide-id="spin"]') 
73
74            var sirv = document.createElement('script');
75            sirv.type = 'text/javascript';
76            sirv.async = true;
77            sirv.src = document.location.protocol.replace('file:', 'http:') + '//scripts.sirv.com/sirv.js';
78            document.getElementsByTagName('script')[0].parentNode.appendChild(sirv);
79        }
80    });
81}
82
83function initMagicZoomPlusSelectors($s) {
84    jQuery($s).on('click touchend', function(e) {
85        if ( jQuery('div[data-slide-id]:visible iframe').length ==1 ) {
86          jQuery('div[data-slide-id]:visible iframe')[0].src = jQuery('div[data-slide-id]:visible iframe')[0].src;
87        }
88        jQuery('div[data-slide-id]').hide();
89        jQuery('div[data-slide-id="' + jQuery(this).attr('data-slide-id') + '"]').show();
90        jQuery('a.active-magic-selector').removeClass('active-magic-selector');
91        jQuery(this).addClass('active-magic-selector');
92        e.preventDefault();
93    });
94}
95
96function isVideoSelector($s) {
97    var regex_youtube_short = /https?:\/\/youtu\.be\/([^\/]{1,})\/?/gm,
98        regex_youtube_full = /https?:\/\/www\.youtube\.com\/watch\?v=(.{1,})/gm,
99        regex_youtube_embed = /https?:\/\/www\.youtube\.com\/embed\/(.{1,})/gm,
100        regex_vimeo = /https?:\/\/vimeo\.com\/(.{1,})/gm,
101        video_id, video_type;
102    var m = regex_youtube_short.exec($s);
103    if (m) {
104        video_id = m[1];
105        video_type = 'youtube';
106    } else {
107        var m = regex_youtube_full.exec($s);
108        if (m) {
109            video_id = m[1];
110            video_type = 'youtube';
111        } else {
112            var m = regex_youtube_embed.exec($s);
113            if (m) {
114                video_id = m[1];
115                video_type = 'youtube';
116            } else {
117                var m = regex_vimeo.exec($s);
118                if (m) {
119                    video_id = m[1];
120                    video_type = 'vimeo';
121                }
122            }  
123        }
124    }
125    if (video_type=='youtube') {
126        return '<iframe src="https://www.youtube.com/embed/'+video_id+'" frameborder="0" allowfullscreen></iframe>';
127    } else if (video_type=='vimeo') {
128        return '<iframe src="https://player.vimeo.com/video/'+video_id+'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
129    }
130
131    return false;

132}
133
134/*
135var mzp_xhr_open = window.XMLHttpRequest.prototype.open,
136    mzp_xhr_send = window.XMLHttpRequest.prototype.send,
137    mzp_xhr_onReadyStateChangeReplacement;
138
139function mzp_xhr_openReplacement(method, url, async, user, password) {
140    var syncMode = async !== false ? 'async' : 'sync';
141    return mzp_xhr_open.apply(this, arguments);
142}
143function mzp_xhr_sendReplacement(data) {
144    if(this.onreadystatechange) {
145        this._onreadystatechange = this.onreadystatechange;
146    }
147    this.onreadystatechange = mzp_xhr_onReadyStateChangeReplacement;
148    return mzp_xhr_send.apply(this, arguments);
149}
150function mzp_xhr_onReadyStateChangeReplacement() {
151
152    if(this._onreadystatechange) {
153        this._onreadystatechange.apply(this, arguments);
154    }
155    if (this.readyState == 4 && this.responseText.match(/modal\-body quickView/gm)) {
156        setTimeout(initMagicZoomPlus,500);
157    }
158}
159
160
161window.XMLHttpRequest.prototype.open = mzp_xhr_openReplacement;
162window.XMLHttpRequest.prototype.send = mzp_xhr_sendReplacement;
163
164*/
165
166function initMagicZoomPlus() {
167
168    var themes = {
169        'Light': {
170            'imagesList': '.productView .productView-thumbnails img',
171            'galleryContainer': 'figure.productView-image',
172            'elementsToHide': 'ul.productView-thumbnails, div.productView-thumbnails'
173        },
174        'Light2': {
175            'imagesList': '.productView .productView-thumbnails img',
176            'galleryContainer': 'ul.productView.productView-image',
177            'elementsToHide': 'ul.productView-thumbnails, div.productView-thumbnails'
178        },
179        'Arcade': {
180            'imagesList': '.template-product .product-images img',
181            'galleryContainer': '.template-product .product-images',
182            'elementsToHide': ''
183        },
184        'Clean': {
185            'imagesList': '.product-wrap .product-thumbnails img',
186            'galleryContainer': '.product-wrap .product-main-image',
187            'elementsToHide': '.product-wrap .product-thumbnails'
188        },
189        'Exhibit': {
190            'imagesList': '.main-product-graphic .product-slides-container img',
191            'galleryContainer': '.main-product-graphic .product-slides-container',
192            'elementsToHide': ''
193        },
194        'Cornerstone': {
195            'imagesList': '.productView-img-container img',
196            'galleryContainer': '.productView-img-container',
197            'elementsToHide': 'ul.productView-thumbnails'
198        },
199        'Cornerstone2': {
200            'imagesList': '.productView-images .productView-thumbnails img',
201            'galleryContainer': '.productView-images .productView-image-update',
202            'elementsToHide': '.productView-images .productView-thumbnails'
203        },
204        'PartsWarehouse': {
205            'imagesList': '#product-images-container .main-image-container img',
206            'galleryContainer': '#product-images-container .main-image-container',
207            'elementsToHide': '#product-images-container .slider-nav'
208        },
209        'Covent': {
210            'imagesList': '.productView-images .productView-thumbs img',
211            'galleryContainer': 'figure.productView-image',
212            'elementsToHide': '.productView-thumbs'
213        },
214        'Covent2': {
215            'imagesList': '.productView-images .productView-img-container img',
216            'galleryContainer': 'figure.productView-image',
217            'elementsToHide': '.productView-thumbs'
218        },
219        'Merchant': {
220            'imagesList': 'body.product .product-slides-container img',
221            'galleryContainer': 'body.product .product-images-container',
222            'elementsToHide': 'body.product .product-images-container .product-images-p

222agination'
223        },
224        'Fortune': {
225            'imagesList': 'body.template-product .product-slideshow-wrapper img',
226            'galleryContainer': 'body.template-product .product-slideshow-wrapper',
227            'elementsToHide': 'body.template-product .single-product-thumbnails'
228        },
229        'Supermarket': {
230            'imagesList': '.productView-detailsWrapper .productView-images .productView-imageCarousel-main img',
231            'galleryContainer': '.productView-detailsWrapper .productView-images .productView-imageCarousel-main',
232            'elementsToHide': '.productView-detailsWrapper .productView-images .productView-imageCarousel-nav'
233        },
234        'Supermarket2': {
235            'imagesList': '.productView-images .productView-imageCarousel-main img',
236            'galleryContainer': '.productView-images .productView-imageCarousel-main',
237            'elementsToHide': '.productView-images .productView-imageCarousel-nav'
238        },
239        'Foundry': {
240            'imagesList': '.template-product .product-slideshow .product-slideshow-images img',
241            'galleryContainer': '.template-product .product-slideshow .product-slideshow-images',
242            'elementsToHide': '.template-product .product-slideshow .product-thumbnails, .template-product .product-slideshow .spinner'
243        },
244        'Eloquence': {
245            'imagesList': '.hero-carousel--product img',
246            'galleryContainer': '.hero-carousel--product',
247            'elementsToHide': '.hero-carousel-navContainer'
248        },
249        'Warm': {
250            'imagesList': 'body.product .product-container .product-images .product-thumbnails img',
251            'galleryContainer': 'body.product .product-container .product-images .product-main-image',
252            'elementsToHide': 'body.product .product-container .product-images .product-thumbnails'
253        },
254        'Solera': {
255            'imagesList': '.page-type-product .productView-images .productView-wrap .productView-image img',
256            'galleryContainer': '.page-type-product .productView-images .productView-wrap',
257            'elementsToHide': '.page-type-product .productView-images .productView-thumbnails'
258        },
259        'Brixton': {
260            'imagesList': '.product-images .product-image-slide img',
261            'galleryContainer': '.product-image-slides-wrap',

262            'elementsToHide': '.product-images-pagination'
263        },
264        'Warm2': // single image page
265        {
266            'imagesList': 'body.product .product-container .product-images .product-main-image img',
267            'galleryContainer': 'body.product .product-container .product-images .product-main-image',
268            'elementsToHide': 'body.product .product-container .product-images .product-thumbnails'
269        }
270    }
271
272    mzOptions.onUpdate = function() {
273        jQuery('a.active-magic-selector').removeClass('active-magic-selector');
274        jQuery('a.mz-thumb-selected').addClass('active-magic-selector');
275    }
276
277    mzOptions.onZoomReady = function(id) {
278        if (!$mzp_firstImageIsVideo) {
279            jQuery('a.mz-thumb-selected').addClass('active-magic-selector');
280        }
281    }
282
283    for (var th in themes) {
284        var theme = themes[th];
285        if (jQuery(theme.imagesList).length && jQuery(theme.galleryContainer).length) {
286
287            var $gallery = jQuery('<div class="MagicZoomGallery ' + th + '"><div class="MagicZoomSelectors"></div></div>');
288
289            var $images = [];
290
291            jQuery(theme.imagesList).each(function(index, el) {
292                var $imageURL = jQuery(this).attr('src');
293
294                if (typeof jQuery(this).attr('data-src') !== typeof undefined && jQuery(this).attr('data-src') !== false) {
295                    $imageURL = jQuery(this).attr('data-src').replace(/(.*)\?.*$/gm, '$1');
296                }
297                if (typeof jQuery(this).attr('data-lazy') !== typeof undefined && jQuery(this).attr('data-lazy') !== false) {
298                    $imageURL = jQuery(this).attr('data-lazy').replace(/(.*)\?.*$/gm, '$1');
299                }
300
301                $imageURL = $imageURL.replace(/(.*)\?.*?$/gm,'$1').replace(/stencil\/[0-9]{1,}x[0-9]{1,}\/products/gm, 'stencil/original/products').replace(/\?[^\/]*$/gm,'')+'?c=2&imbypass=on&imbypass=on';
302
303                if (typeof $images[$imageURL] != 'undefined') {
304                    return;
305                }
306                $images[$imageURL] = $imageURL;
307
308                var $alt = jQuery(this).attr('alt'),
309                    $title = jQuery(this).attr('alt');
310
311                if (jQuery(this).closest('a').attr('data-type') == 'video') {
312                    $alt = 'https://www.youtube.com/watch?v=' + jQuery(this).closest('a').attr('data-modal-content').replace(/.*https?:\/\/www\.youtube\.com\/embed\/(.*?)(\?|$).*/gm,'$1')
313                }
314
315                var $videoCode = isVideoSelector($alt);
316
317                if (index == 0) {
318                    $gallery.prepend(
319                        '<div data-slide-id="zoom">' +
320                        '<a title="' + $title + '" class="MagicZoom" data-options="autostart:false;" id="zoom" href="' + $imageURL + '">' +
321                        '<img title="' + $title + '" alt="' + $alt + '" src="' + $imageURL.replace(/\/original\//gm, '/500x659/') + '" xsrcset="' + $imageURL.replace(/\/original\//gm, '/1000x1318/') + ' 2x"/>' +
322                        '</a></div>'
323                    );
324                }
325
326                if ($videoCode) {
327                    $gallery.find('.MagicZoomSelectors').append('<a data-slide-id="video-' + index + '" href="#"><img src="' + $imageURL.replace(/\/original\//gm, '/75x75/') + '"/></a>');
328                    $gallery.find('div[data-slide-id="zoom"]').after('<div style="display:none" data-slide-id="video-' + index + '">' + $videoCode + '</div>');
329
330                    if (index == 0) {
331                        $mzp_firstImageIsVideo = true;
332                        $gallery.find('div[data-slide-id="zoom"]').hide();
333                        $gallery.find('div[data-slide-id="video-' + index + '"]').show();
334                        $gallery.find('a[data-slide-id="video-' + index + '"]').addClass('active-magic-selector');
335                    }
336
337                } else {
338                    $gallery.find('.MagicZoomSelectors').append('<a data-slide-id="zoom" title="' + $title + '" data-zoom-id="zoom" href="' + $imageURL + '" data-image="' + $imageURL.replace(/\/original\//gm, '/500x659/') + '" xdata-image-2x="' + $imageURL.replace(/\/original\//gm, '/1000x1318/') + '"><img title="' + $title + '" alt="' + $alt + '" src="' + $imageURL.replace(/\/original\//gm, '/200x60/') + '" srcset="' + $imageURL.replace(/\/original\//gm, '/400x120/') + ' 2x"/></a>');
339                }
340
341            })
342
343            jQuery(theme.galleryContainer).hide().after($gallery);
344
345            if (jQuery('.MagicZoomSelectors a').length == 1) {
346                jQuery('.MagicZoomSelectors').hide();
347            }
348

349            initMagicZoomPlusSelectors('a[data-slide-id]');
350
351            jQuery(theme.elementsToHide).remove();
352            jQuery(document.body).addClass('MZP-' + th);
353
354            jQuery('input[name*="attribute"], select[name*="attribute"]').on('change', function() {
355                var data = { }, $formData = $('form[data-cart-item-add]').serializeArray();
356                for (var i in $formData) {
357                    data[$formData[i].name] = $formData[i].value;
358                }
359                jQuery.ajax({
360                    dataType: "json",
361                    url: '/remote/v1/product-attributes/' + jQuery('input[name="product_id"]').val(),
362                    headers: { 'stencil-config': '{}', 'stencil-options': '{"render_with":"products/bulk-discount-rates"}', "x-xsrf-token": window.BCData && window.BCData.csrf_token ? window.BCData.csrf_token : "" },
363                    data: data,
364                    method: 'post',
365                    success: function(response) {
366                        if (response.data.image != null) {
367                            MagicZoom.update('zoom', response.data.image.data.replace('{:size}', 'original'), response.data.image.data.replace('{:size}', '1000x1318'))
368                        }
369                    }
370                });
371            });
372
373            $mjs(document).jAddEvent('domready', function() {
374                setTimeout(function(){MagicZoom.start();},100);
375            });
376
377            initSirv();
378
379            break;
380        }
381    }
382}