Image update to larger instead of new window

Hi & Happy New Year :slight_smile:

Im using the Storefront WooCommerce Theme and would would like the additional thumbnails under the product to update the main image when their clicked or hovered. Currently they just open a new page when user clicks them. how can this be resolved. is it some kind of lightbox or something or way to just update the main larger image see screenshot - http://take.ms/cgMrw

Domain of the three products
- http://tinyurl.com/j5nbnc8
- http://tinyurl.com/gsvpxej
- http://tinyurl.com/o95ebbf

Support access is ACTIVE until January 4, 2016 6:56 pm

Thanks

Tom

  • Rupok

    Hi Tom

    I hope you had a wonderful day and happy new year.

    As "Storefront WooCommerce Theme" is a third party theme and "WooCommerce" is a third party plugin, I don't have exact idea about their coding. So I searched a little and found that in default settings of that theme, images appear in a light box when you click on the big image or the smaller images below the big image and in most of the cases, this lightbox not appearing issue is being caused by another lightbox in site.

    So do you want to show your images in a lightbox like it does in the demo theme here ? http://demo2.woothemes.com/storefront/product/vintage-green-retro-tv/

    Or if you want to update it without modifying any settings of you site, you can also do it in the following way:

    First, use this custom CSS code with "Simple Custom CSS" plugin. You can use any other plugin but I'm suggesting you this because it has 200000+ active installs.

    .attachment-shop_thumbnail.size-shop_thumbnail {
      float: left;
      margin: 10px;
    }

    Then create a MU Plugin and use the following code. For creating a mu plugin, create a folder named "mu-plugins" inside your "wp-content" folder. Then inside that "mu-plugins" folder, create a file with any name and with a .php extension. Now paste the code inside that file and save.

    <?php
    
    add_action( 'wp_footer', 'show_thumb_images' );
    function show_thumb_images() {
        ?>
        <script type="text/javascript">
    		jQuery(document).ready(function(){
    			jQuery(".attachment-shop_thumbnail").unwrap();
    			  jQuery(".attachment-shop_thumbnail" ).each(function( i ) {
    		     jQuery(".zoom" > this).unwrap();
    		 	});
    			jQuery(".attachment-shop_thumbnail").click(function(){
    				var bVal = jQuery(this).attr('src');
    				if(jQuery(".attachment-shop_single").attr('srcset') == '' || jQuery(".attachment-shop_single").attr('src')){
    					jQuery(".attachment-shop_single").hide().attr({'srcset': bVal}).fadeIn(225);
    				}else{
    					jQuery(".attachment-shop_single").fadeOut(200).attr({'srcset': bVal}).fadeIn(225);
    				}
    			});
    		});
        </script>
        <?php
    }

    For getting more idea on mu plugins, you can go through this article: https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Tom

    I hope you had a wonderful day.

    To make the bigger image scaled to fit withing the main larger image, please replace the code in your MU Plugin with the code below:

    <?php
    
    add_action( 'wp_footer', 'show_thumb_images' );
    function show_thumb_images() {
        ?>
        <script type="text/javascript">
    		jQuery(document).ready(function(){
    			jQuery(".attachment-shop_thumbnail").unwrap();
    			  jQuery(".attachment-shop_thumbnail" ).each(function( i ) {
    		     jQuery(".zoom" > this).unwrap();
    		 	});
    			jQuery(".attachment-shop_thumbnail").click(function(){
    				var bVal = jQuery(this).attr('src').slice(0,-24);
    				if(jQuery(".attachment-shop_single").attr('srcset') == '' || jQuery(".attachment-shop_single").attr('src')){
    					jQuery(".attachment-shop_single").hide().attr({'srcset': bVal}).fadeIn(225);
    				}else{
    					jQuery(".attachment-shop_single").fadeOut(200).attr({'srcset': bVal}).fadeIn(225);
    				}
    			});
    		});
        </script>
        <?php
    }

    For resizing the thumbnails, please use the following custom CSS Code:

    .attachment-shop_thumbnail.size-shop_thumbnail {
      width: 28%;
    }

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.