Fancybox3 in Prestashop 1.6.1.x

[allstarteste]

Hello,

We have obtained numerous comments on the possibility of swipe the photos with the finger in the mobile version.

What is certain is that it would be a fantastic improvement in version 1.6 because it still has many users.

 

The fancybox 3 version already allows you to change the photos by swipe your finger and so asked for help on what changes we would have to make in order to be able to use fancybox3 in prestashop 1.6?

 

I checked the prestashop versions 1.7 and still rely on fancybox 2.1.5 ...

 

I tried copying versions 3 of: jquery.fancybox.css and jquery.fancybox.js in place of old ones and the functionality of swapping the photos with the finger does not work. It works zoom, clean etc ... but what really was needed does not work ...

In addition the desktop version also does not work well because when you open the first photo duplicates and also does not change the photo ...

 

Has anyone managed to make it possible in the mobile version to change the photos with the finger swipe ???
Has anyone ever used fancybox3 in version 1.6?

Thanks for listening

 

[alexalxx]

Hello!

To use Fancybox 3 you can try this.

First in product.tpl find:

data-fancybox-group="other-views" 

and replace it with 

data-fancybox="group"

To fix that problem 

Quote

when you open the first photo duplicates and also does not change the photo

in product.js find this:

$(document).on('click', '#view_full_size, #image-block', function(e){
	$('#views_block .shown').click();
});

and replace it with 

$(document).on('click', '#view_full_size', function(e){
	$('#views_block .shown').click();
});

On my site (Prestashop 1.6) it works

[allstarteste]

Good morning, Alexal
Thanks for the reply, I'll try those changes you speak and then post the result here.

[allstarteste]

I have not tested everything but it seems to work correctly.

0- I made backup of the files in question
1 - I copied the files:
jquery.fancybox.js
jquery.fancybox.min.js
jquery.fancybox.css
jquery.fancybox.min.css

to the / js / jquery / plugins / fancybox / folder in the old one.

2 - I made the changes indicated by alexalxx
3 - Works correctly

THANK YOU alexalxx

[Владимир Куншин]

On 2/19/2018 at 3:03 PM, allstarteste said:

I have not tested everything but it seems to work correctly.

0- I made backup of the files in question
1 - I copied the files:
jquery.fancybox.js
jquery.fancybox.min.js
jquery.fancybox.css
jquery.fancybox.min.css

to the / js / jquery / plugins / fancybox / folder in the old one.

2 - I made the changes indicated by alexalxx
3 - Works correctly

THANK YOU alexalxx

2

Hello! Please, help me with this! I've got 1.6.1.23 Prestashop with fancybox from original install. What I did:

1) Downloaded fancybox from https://github.com/fancyapps/fancybox

2) Extracted the files named above to / js / jquery / plugins / fancybox / 

3) Changed  data-fancybox-group="other-views" to data-fancybox="group" in product.tpl in my theme folder.

And here's the problem. I could not find these lines in product.js in my theme folder / js /at all! I guess something was changed after your last posts, so right now my fancybox doesnt have navigation arrows at all and the swipe doesn't work too.

$(document).on('click', '#view_full_size, #image-block', function(e){
	$('#views_block .shown').click();
});

Help me with this, maybe you could share your files with correct code or something. Couldn't find a working way for swipe for my site...