PopUp Modal for Attribute Images

[SidFeyDesigns]

No worries Bruce.

Either way you are usually the first to respond with suggestions and seem to be one of the more helpful members of this forum.

I'm not a professionally trained developer by any means, so it's nice to have people in the community who are willing to help even if it is just giving good direction or guidance.

Have a good one.

[SidFeyDesigns]

In case anyone who stumbles upon this thread wants to see it in action.

https://www.loveisarose.com/ILYR11.html

[Bruce - PhosphorMedia]

np. sorry couldn't offer specifics. as i said, we don't have a lot of experiance with the readytheme base since we use our own or baseready

[SidFeyDesigns]

Well you definitely pointed me in the right direction.

Here's the code for the image links

<mvt:if expr="l.settings:option:image">
<a href="&mvte:option:image;" data-custom="&mvte:option:image;" class="button product-attributes-image-button black bg-lt-gray">View Image</a>
</mvt:if>

Here's what I found that works in the scripts file:

// ---- Open Attribute Image Modal ---- //

$('.product-attributes-image-button').magnificPopup({
type : 'image',
callbacks : {
open : function(){
var mp = $.magnificPopup.instance,
t = $(mp.currItem.el[0]);

console.log( t.data('custom') );
}
}
});


Thanks for the help as always Bruce.

[Bruce - PhosphorMedia]

because you are targeting a class...and there are multiple classes on the page. You need to switch to IDs. and make the IDs unique either with a count or attr-code. Then, you need to encode each button with the unique id.

Personally, I'd see if the magnificent popup can take a data-attribute value as the actual URL to display (of the image) or find a popup that can (re: we tend to use Bootstrap and it has an option to pass in the url (or any other data) as a data attribute.

[SidFeyDesigns]

I tried this but still having trouble getting it to show the image from the actual link.

<mvt:if expr="l.settings:option:image">
<mvt:assign name="g.attribute:image" value="''$ l.settings:option:image" />
<mvt:assign name="g.attribute:index" value="''$ l.settings:attribute:index" />
<a href="&mvte:option:image;" class="button product-attributes-image-button black bg-lt-gray">View Image</a>
</mvt:if>



I moved this code to the footer of the page template

<div class="row mfp-hide attribute-image"><img src="&mvt:global:attribute:image;" class="js-attribute-image" data-image="&mvt:global:attribute:image;" data-index="&mvt:global:attribute:index" /></div>

the popup works but no matter what attribute image link you click, it shows the last attribute's image (of the attributes with images) in the popup.

Is there something i'm missing within the scripts.js code snippet?

Here it is again for convenience:

$('.product-attributes-image-button').magnificPopup({

items: {
src: $('.js-attribute-image').attr('data-image'),
index: $('.js-attribute-image').attr('data-index')

},

type: 'image',

});

Thanks

[Bruce - PhosphorMedia]

Within the Attribute template conditional "<mvt:if expr="l.settings:option:image">", create a global variable to store the "items". Then, at the bottom of the page where you have your actual script call, express the global variable containing the stored "items".

Common technique for when WHERE you can express variables, is not where you can "get" the variables.

[SidFeyDesigns]

I'm trying to create a popup modal for links to the attribute images


Here is the code on our attribute template. (testing this with not required radio attributes on a "developer" PROD page template)


<mvt:if expr="l.settings:option:image">
<a href="&mvte:option:image;" class="button product-attributes-image-button black bg-lt-gray">View Image</a>
<div class="row mfp-hide attribute-image"><img src="&mvte:option:image;" class="js-attribute-image" data-image="&mvte:option:image;" data-index="&mvt:global:counter;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" /></div>
</mvt:if>



I have already set up the position counter and it is working properly. Just can't figure out how to link the data-index to the jquery in the scripts file

Here is whats in the scripts file


// ---- Open attribute images ---- //


$('.product-attributes-image-button').magnificPopup({

items: {
src: $('.js-attribute-image').attr('data-image'),
index: $('.js-attribute-image').attr('data-index')

},

type: 'image',

});


Any help would be greatly appreciated

Thanks