Announcement

Collapse
No announcement yet.

Two Popup Images on Product Page?

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

  • 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?


    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • 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?
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • 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.

      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment

      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