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

    #2
    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

    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


      #3
      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