Two Popup Images on Product Page?

[lesliekirk]

I would like to try and tap into the existing code "available" to have two popup images on the PROD. I've stumbled into getting the modal but without any image loading into it. I know the Image Machine does some magic behind the scenes to load the image full-sized with this link:

<a data-mini-modal data-mini-modal-type="inline" href="#closeup_image" title="&mvte:product:name;">

I took that link and changed it a little to get the second modal

[CODE]<a data-mini-modal data-mini-modal-type="inline" href="#closeup_image_swatch" title="&mvte:product:name;">/CODE]

That at least gets me the modal (along with a 403 error and no popup image)


Can I tap into the power of the existing coding to make this happen? Or do I have to add something else to be able to do this? If I have to use something else, what is recommended?

[Matt Zimmermann]

Hi Leslie,

You are targeting an element with the ID of "closeup_image_swatch"; do you have an element on the page with that ID?

[lesliekirk]

Hi Leslie,

You are targeting an element with the ID of "closeup_image_swatch"; do you have an element on the page with that ID?

Ummmm...no. OMG, that was too easy. For the curious, here's what I did (just to get it going)

<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:prodimage2">
<a data-mini-modal data-mini-modal-type="inline" href="#closeup_image_swatch" title="&mvte:product:name;">
            <img id="swatch" class="x-product-layout-images__image" src="&mvt:product:customfield_values:customfields:prodimage2;" alt="&mvte:product:name;" title="&mvte:product:name;">
        </a>
<p>Click to zoom</p>
<img id="closeup_image_swatch" class="u-hide-visually" src="&mvt:product:customfield_values:customfields:prodimage2;" alt="&mvte:product:name;" title="&mvte:product:name;">
        <span id="closeup_close" class="u-hidden">
            <span id="closeup_div" class="u-hide-visually"></span>
        </span>
</mvt:if>

I will be going back in and set up another custom field for the larger image.