"single product page image help" (#1003153) / Laborator Support

Comments

2
intifabricioo started the conversation
December 29, 2016 at 3:55pm
Hi there,
I have two questions:

1. : "On single product pages I want the small images in the bottom (thumbnails) to replace the main image when rollover (not on click)"

Now, when I click on the thumbnails it is not the right image that is displayed as main image. (see single product pages)

2. Also, can you tell me how to not display the image 1 in the thumbnails.

I explain, I want image 1 as main image and image 2, image 3 image 4 as thumbnails.

Now i have image 1 as main image and image 1, image 2 and imange 3 as thumbnails (no image 4)

I want something similar to this for thumbnails but with rollover activation : http://travailsale.fr/product2.html

Thanks a lot for your help
intifabricioo replied privately
[deleted] replied
January 2, 2017 at 6:29pm
Hi,
1. Yes that is possible, I have modified the functionality of product thumbnails and switched from clicking to hover image carousel switch, so to apply this change:
Download this file and replace it in this directory (of the theme): /assets/js
If you don't see the change immediately, please hard-refresh your browser (CTRL/CMD+R) because it takes longer to load the changes, as they are saved in browser cache. Another option is to open new private/incognito window and try if it works.
2. Yes that is possible, you need to add this line in functions.php:
add_filter( 'kalium_woocommerce_skip_featured_image', '__return_true' );
Also, just replace one file (one time only) because this feature is not implemented in current version of Kalium:
Download this file and replace it in this directory (of the theme): /woocommerce/single-product/
2
intifabricioo replied
January 3, 2017 at 2:48am
Hi Arlind,
Thanks for the support it is almost good !
Now I just need the the main image to come back automatically when NOT hovering any of the three thumbnails images.
Kind regards

[deleted] replied

January 7, 2017 at 3:49pm

Hi,

Add this JavaScript code in Theme Options > Footer > JavaScript & Tracking Code > Footer JavaScript:

<script type="text/javascript">
jQuery( document ).ready( function() {
    jQuery( '.images' ).mouseout( function() {
       jQuery( '.product-images-carousel' ).slick( 'slickGoTo', 0 );
    } );
} );
</script>

This should work for you.

2
intifabricioo replied
January 9, 2017 at 6:46pm
Hi,
There is still something that need to be improved because when you pass quilckly from thumbnail 1 to thumbnail 2 the main image is displayed and block the loading of thumbnail 2. If think it is because of the empty spaces between two thumbnails or it might be something in relationship with the images loading priorities.
http://intistudio.fr/produit/hoi-an-flower-baseball-cap/
Try to change images hovering thumbnails and you will see that something is wrong

[deleted] replied

January 12, 2017 at 12:24pm

Hi,

I have changed the code that I gave you and it seems to work fine now:

<script>
jQuery( document ).ready( function( $ ) {
    var currIndex = 0,
        switchThumbFn = $.debounce( 300, switchThumb );
    
    $( 'body' ).on( 'mouseenter', '.thumbnails .slick-slide', function( ev ) {
        currIndex = 1 + Number( $( this ).attr( 'data-slick-index' ) );
        switchThumbFn();
    } );
    
    $( 'body' ).on( 'mouseout', '.images', function( ev ) {
        currIndex = 0;
        switchThumbFn();
    } );
    
    function switchThumb() {
        $( '.product-images-carousel' ).slick( 'slickGoTo', currIndex );
    }
} );
</script>

So not it works fine and slide switching is correct and smooth.

If you don't see the change immediately, please hard-refresh your browser (CTRL/CMD+R) because it takes longer to load the changes, as they are saved in browser cache. Another option is to open new private/incognito window and try if it works.