Prestashop product image swap on thumbnail click

[grafiker]

This is the website

 

Every product has the posibility to have several images, those images are listed as a list to the left of the main product image.

 

The problem I have is when the user clicks on any of the thumbs, it get's the image but on a modal box, not swaping over the main image. Just like this example

 

Any guide/ideas how to achieve this on Prestashop? Preferably a javascript solution

[razaro]

Problem is that big image block is positioned over thumbnails images,

so script can not register hover event over thumbnails. Fix is easy, change

in theme/default/css product.css line 15 code to

#pb-right-column #image-block {
position: relative;
float: left;
}

[grafiker]

thanks! It was easy...

Do you know if it is possible to change the image also on click instead of hover?

 

I have updated the website with the css fix btw.

[razaro]

Yes it is possible, in theme/default/js/product.js find

//hover 'other views' images management
$('#views_block li a').hover(
 function(){displayImage($(this));},
 function(){}
);

and replace it with

$('#views_block li a').click(function(e) {
 e.preventDefault();
 displayImage($(this));
});

 

Also you should comment out this part

/*$('.thickbox').fancybox({
 'hideOnContentClick': true,
 'transitionIn' : 'elastic',
 'transitionOut' : 'elastic'
});*/

So it will not show fancybox on thumbnail click.

 

And if you want to show fancybox when big image is clicked

you could change code

//add a link on the span 'view full size' and on the big image
$('#view_full_size, #image-block img').click(function(){
 $('#views_block .shown').click();
});

to

$('#view_full_size, #image-block img').click(function(){
 var imageBuilder = [];
 var counter = 0;
 var current = $('#views_block .shown img').attr('src').replace('medium','thickbox');
 imageBuilder.push(current);

 $("#views_block li img").each(function() {
  if($(this).attr('src').replace('medium','thickbox') != current){
   imageBuilder.push($(this).attr('src').replace('medium','thickbox'));
   counter++;
  }
 });
 $.fancybox(
	   imageBuilder,
 {
   'hideOnContentClick': true,
   'transitionIn' : 'elastic',
   'transitionOut' : 'elastic',
   'type'		  : 'image'  
  }
   );
});

[grafiker]

Thank you very much! it works completely

[perusi]

@razaro,

 

could you please tell us how we can select which image is called it's clicked on bigpic? now, it displays the medium one

 

what code should we use, so that we can select the thickbox_default image or an image specially selected for this fancybox...

 

thanks

Edited April 3, 2013 by perusi (see edit history)

[Anton_bcn]

maybe it will be useful for some one

 

$('#view_full_size').click(function(){
 var imageBuilder = [];
 var counter = 0;
 //var current = $('#views_block .shown img').attr('src').replace('large','thickbox');
 var current = $('#views_block a.shown').attr('href');
 imageBuilder.push (current);

 $("#views_block li a").each(function() {
  if($(this).attr('href') != current){
   imageBuilder.push($(this).attr('href'));
   counter++;
  }
 });

 $.fancybox(imageBuilder,{
          'hideOnContentClick': true,
          'transitionIn' : 'elastic',
          'transitionOut' : 'elastic',
           'type' : 'image'  
  }
          );
});

Edited May 20, 2013 by anseme (see edit history)

[14bis]

Hello all, any solution for Prestashop 1.6 ?

[Alejandrosi]

14bits:

 

Try changing theme/default/js/product.js:

//hover 'other views' images management
$('#views_block li a').hover(
  function(){displayImage($(this));},
  function(){}
);

to:

$('#views_block li a').click(function(e) {
  e.preventDefault();
  displayImage($(this));
});

And then remove:

/*$('.thickbox').fancybox({
  'hideOnContentClick': true,
  'transitionIn' : 'elastic',
  'transitionOut' : 'elastic'
});*/

It worked for me...

[14bis]

Alejandrosi - working, tks !

[Tatort]

14bits:

 

Try changing theme/default/js/product.js:

//hover 'other views' images management
$('#views_block li a').hover(
  function(){displayImage($(this));},
  function(){}
);

to:

$('#views_block li a').click(function(e) {
  e.preventDefault();
  displayImage($(this));
});

And then remove:

/*$('.thickbox').fancybox({
  'hideOnContentClick': true,
  'transitionIn' : 'elastic',
  'transitionOut' : 'elastic'
});*/

It worked for me...

 

Hello in my code the line is:

 

//hover 'other views' images management

$(document).on('mouseover', '#views_block li a', function(){

    displayImage($(this));

});

 

so ich change in:

 

//hover 'other views' images management

$(document).on('click', '#views_block li a', function(){

    displayImage($(this));

});

 

 

But to desactivate the zoom effect on miniature... i didn't find how... anyone has an idea?

 

Thanks

Edited November 7, 2016 by Tatort (see edit history)