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