trigger gallery change

  • On my single product page, I would like to display a certain image in the gallery when a user clicks on an option for the product.

    If you visit the site, there is a selection called “Zertifikat Auswahl”, where you can select a certificate design.
    What I would like to accomplish is to make the gallery on the left show the picture corresponding to the selection made.

    Is there any way to do that?
    Thanks a lot in advance!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi there,

    the theme has no control over that.
    you would need a plugin – search for Woocommerce Variation Swatches

    Thread Starter anzgar

    (@anzgar)

    I actually found a solution and thought to share it:

    <script>
	jQuery(window).load(function(){
	  if( jQuery('body').hasClass('single-product') ){
		var isMobile = window.matchMedia("only screen and (max-width: 760px)");
	    if (!isMobile.matches) {
			jQuery('label.ppom-palette-item img').click(function(e) {
	      	var ttl = jQuery(this).attr("alt");
	      	var i =jQuery(".woocommerce-product-gallery__image[data-thumb-alt='"+ttl+"']").index();
	      	jQuery('.woocommerce-product-gallery').flexslider(i);
	      	//alert("ttl:  "+ttl+"  i  "+i);  
	    });
    	}

	  }
	});
	</script>

    You would probably need to change “label.ppom-palette-item” to whatever element you would be using as a trigger.

    Maybe someone can use it.

    It messed up my mobile view a little, that’s what the “isMobile” part is for.

    Update: this only works if the”alt” tags of both items are identical (source image and destination image). So you might have to play around a little, or use a different property.

    • This reply was modified 1 year, 10 months ago by anzgar.

    Glad to hear you found a solution. Have fun with that ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘trigger gallery change’ is closed to new replies.