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)

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 (516)

Share on Facebook0Share on Google+0Share on LinkedIn0Tweet about this on TwitterEmail this to someonePrint this page
[Total: 2    Average: 5/5]

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 *

eleven − 9 =