This tutorial is base on the Prestashop 1.6.X
Every product has the possibility to have several images, those images are listed as a list to the left of the main product image.
The problem is when the user clicks on any of the thumbnails, it pops up with a fancy box and swapping over the main image on mobile devices.
1. In theme/js/product.js
Find this: if (!!$.prototype.fancybox)
if (typeof(contentOnly) != 'undefined' && !contentOnly) { if (!!$.prototype.fancybox) $('li:visible .fancybox, .fancybox.shown').fancybox({ 'hideOnContentClick': true, 'openEffect' : 'elastic', 'closeEffect' : 'elastic' }); }
replace above with below code
if (typeof(contentOnly) != 'undefined' && !contentOnly) { if(!isMobile) { //Checking whether mobile access or not. if (!!$.prototype.fancybox) { $('li:visible .fancybox, .fancybox.shown').fancybox({ 'hideOnContentClick': true, 'openEffect' : 'elastic', 'closeEffect' : 'elastic' }); } } }
And then add below code just above that if statement block.
if(isMobile) { //Checking whether mobile access or not. $('#thumbs_list a.fancybox').click(function(e) { e.preventDefault(); }); }
2. Final code looks like below:
if(isMobile) { //Checking whether mobile access or not. $('#thumbs_list a.fancybox').click(function(e) { e.preventDefault(); }); } if (typeof(contentOnly) != 'undefined' && !contentOnly) { if(!isMobile) { //Checking whether mobile access or not. if (!!$.prototype.fancybox) { $('li:visible .fancybox, .fancybox.shown').fancybox({ 'hideOnContentClick': true, 'openEffect' : 'elastic', 'closeEffect' : 'elastic' }); } } } else if (typeof ajax_allowed != 'undefined' && !ajax_allowed) ......
That’s it!
Views (1108)
[Total: 2 Average: 5/5]
The following two tabs change content below.

Chris Mok
Senior Developer at GNA eMarketing
Core Contributor on the WordPress.org

Latest posts by Chris Mok (see all)
- WHM – Change account setup date manually - August 25, 2016
- Manually generate the notifications to who over disk quota - August 23, 2016
- Help Desk Management: What is Level 1, Level 2, and Level 3 Help Desk support? - July 27, 2016
- Find and delete files greater than a given size from the Linux command line - April 18, 2016
- How to change WordPress default email’s From name and address - April 15, 2016
Unfortunately, didn’t worked for me. I’ve replaced the code like you suggested and the “fancybox” still appears on mobile devices. It’s kind of annoying for customers but i have to keep searching for a solution. Thank anyway.
Hi Adriano,
Could you provide me the version of Prestashop what you tested it?
Hi Chris,
also on my website ( http://www.iljollydifrediani.com/en/duvet-cover/duvet-cover-sartorial-type-eggshell-cotton-86.html ) continues to remain, I’d also like to know how to disable it from the desktop. Of course I tried to clear the cache from back office and browser but nothing. I hope really that you can help me.
Best Regards Francesco Frediani.
Hi Francesco,
I think you successfully disabled it on the mobile when I checked your website.
Anyway, you’d like to disable it on the desktop as well.
Please change the if statements like below,
if(isMobile || true) { //Checking whether mobile access or not.
$(‘#thumbs_list a.fancybox’).click(function(e) {
e.preventDefault();
});
}
if(!isMobile && false) { //Checking whether mobile access or not.
if (!!$.prototype.fancybox) {
$(‘li:visible .fancybox, .fancybox.shown’).fancybox({
If it works, please comment here and give 5 stars :-)