Disable fancybox for product thumbnails

[dennisv1]

Hello,

 

I am updating my old prestashop 1.5.4.1 to version 1.6.1.7 and i am not happy how the image thumbnails work on the product page.

 

When you are on a mobile phone and want to see another product image. You click on the small thumbnail which changes the Main image but also opens the fancybox.

 

I would like to keep the fancybox for the main image but want to remove it on the thumbnails.

 

I can’t find anything like this on this forum and already tried editing product.tpl and products.js but can’t figure it out.

 

Can someone help me with this issue?

 

Kind regards,

Dennis

[vidales]

did  anyone solve this issue?

I am lost deeping in ps fancybox jquery code

 

Regards

V.

Edited February 19, 2017 by vidales (see edit history)

[YopixelAE]

Hello,

I would like to keep the fancybox for the main image but want to remove it on the thumbnails.

I can’t find anything like this on this forum and already tried editing product.tpl and products.js but can’t figure it out.

 

Here is a demo of what you are looking for :

http://f430a4a107.url-de-test.ws/demos/slickslider/prestashop/en/chemisiers/2-chemisier.html

You should unbind fancybox click event on thumbails (event which may be triggered also by a click on main image, that's why it is a little bit tricky).

To sum up, here is the snippet that you must paste into your product.js :

$(document).ready(function() {
	$('#thumbs_list_frame li a').on('click', function(event) {
		var target = event.target ? event.target : event.srcElement;
		var targetId = target.id;
		if (targetId.indexOf('thumb') !== -1) {
			event.preventDefault();
			return false;
		} else {
			$(this).on("click.fb-start");
			$(this).fancybox({
				'hideOnContentClick': true,
				'openEffect': 'elastic',
				'closeEffect': 'elastic',
				'live': false,
				'afterClose': function {
					$('.fancybox.shown').unbind('click.fb-start');
				}
			});
		}
	});
});