Announcement

Collapse
No announcement yet.

Two Popup Images on Product Page?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    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)

    Code:
    <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.

    Leave a comment:


  • Matt Zimmermann
    replied
    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?

    Leave a comment:


  • lesliekirk
    started a topic Two Popup Images on Product Page?

    Two Popup Images on Product Page?

    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:
    Code:
    <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?


Working...
X

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept