Trying to see if Suviant is a viable option. Using attribute images seems to work on the PROD page until you want to open the large view of individual colors and then it doesn't popup the correct one. What's missing to make this work the way it should?
Announcement
Collapse
No announcement yet.
attribute images popup
Collapse
X
-
Re: attribute images popup
Hi Mark,
Good catch, looks like that particular use case got by me. With the following changes in the "scripts.js" file, variant images will now work in the zoom image light box.
Around line 271 in the jsPROD function, replace this...
Code:var thumbnails = document.getElementById('js-thumbnails'); for (var i = 0; i < thumbnails.children.length; i++) { (function (index) { thumbnails.children[i].onclick = function () { document.getElementById('js-main-image-zoom').setAttribute('data-index', index); } })(i); };
Code:var mainImageZoom = $('#js-main-image-zoom'), thumbnails = $('#js-thumbnails'); thumbnails.on('click', 'div', function () { var thumbnailIndex = $(this).attr('data-index'); mainImageZoom.attr('data-index', thumbnailIndex); });
Code:mainImageZoom.attr('data-index', 0); thumbnailIndex = 0;
Matt Zimmermann
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
-
Re: attribute images popup
Hi Mark,
Can you post a link to your test product? Here is the demo from the Suivant site [http://suivant-theme.mivamerchantdev...t/peeptoe.html]. The two variants are based on being size 5 and you can switch between the two colors.Last edited by Matt Zimmermann; 01-30-15, 11:33 AM.Matt Zimmermann
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
Comment
-
Re: attribute images popup
Hi Mark,
Yeah, I just threw some images in there for testing. Are you assigning the image type of "main" to your product and variants? The path to the large image does not appear to be updating.Matt Zimmermann
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
Comment
-
Re: attribute images popup
Hi Mark,
The main image type is just for pulling the primary image for the product. You can have as many images as you would like, typed and untyped, assigned to a product. If you want to use a different image type for the primary image, you will just need to update the product display code to reflect the change in image type.Matt Zimmermann
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
Comment
-
Re: attribute images popup
I did to this
<span data-icon="T" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimag ecustomfields:codea;" /></span>Mark Hood
Vermont Gear
Comment
-
Re: attribute images popup
Hi Mark,
Looks like this should take care of it. In the "Product Display Layout Image Machine" section of the product display page, replace this...
Code:<script> var gallery = [], thumbnailIndex = 0; ImageMachine.prototype.ImageMachine_Generate_Thumbnail = 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; }; </script>
Code:<script> var gallery = [], thumbnailIndex = 0; ImageMachine.prototype.ImageMachine_Generate_Thumbnail = 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; }; </script>
Matt Zimmermann
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
Comment
Comment