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 (1186)
Chris Mok
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 :-)