Prevent fancy box popup on product detail page on mobile – Prestashop

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)

[js]
if (typeof(contentOnly) != ‘undefined’ && !contentOnly)
{
if (!!$.prototype.fancybox)
$(‘li:visible .fancybox, .fancybox.shown’).fancybox({
‘hideOnContentClick’: true,
‘openEffect’ : ‘elastic’,
‘closeEffect’ : ‘elastic’
});
}
[/js]

replace above with below code

[js]
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’
});
}
}
}
[/js]

And then add below code just above that if statement block.

[js]
if(isMobile) { //Checking whether mobile access or not.
$(‘#thumbs_list a.fancybox’).click(function(e) {
e.preventDefault();
});
}
[/js]

2. Final code looks like below:

[js]
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)
……
[/js]

That’s it!

Views (1187)

4 thoughts on “Prevent fancy box popup on product detail page on mobile – Prestashop

  • 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 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 :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

20 − eleven =