Announcement

Collapse
No announcement yet.

PopUp Modal for Attribute Images

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

  • PopUp Modal for Attribute Images

    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


  • 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.
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


    • 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

      Comment


      • 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.
        Bruce Golub
        Phosphor Media - "Your Success is our Business"

        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
        phosphormedia.com

        Comment


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

          Comment


          • 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
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


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

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

              Comment


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

                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