Problem With Fancybox In Product Description After Update To 1.6

[OliB]

Hi,

 

In PS 1.5 we used fancybox in the product description to show detailed images of the product.
The link we used has this form:
 

<a href="Shopurl/img/cms/subfolder/Detail0815Picture.jpg" class="fancybox" data-fancybox-group="other-views">Detail0815</a>

After the update to 1.6.1.2 the fancybox doesn't work anymore.

The Picture opens without fancybox.

 

 

I could edit the class to:

... class="fancybox shown" ...

and the fancybox works. But for this i have to do search und replace the sql data for all of my products.

 

Has anybody a tip how to edit the product.tpl and js/product.js file in such a way that it works with the "old" class?

 

[Mixa_RU]

Hi!

 

Did you check browser console for errors?

[OliB]

Unfortunately no.

I can't see errors in the console.

 

If copy the whole product.tpl and the product.js files from the version 1.5 to the updated shop the fancybox works.

But there are so many changes in the files that is hard to finde the right piece of code or rather codes which are responsible for this.

 

In detail

I searched for special functions in the js file which where responsible for images or have the name fancybox- no result.

I replaced the upper half of the code- no result

I replaced the lower part of the code- no result

When I replace the whole code the fancybox worked.

[Mixa_RU]

May I have a look at your shop?

Please send me a link (after upgrade where fancybox is not working).

[OliB]

Sure

 

Here ist the link

[Mixa_RU]

It works ok.

No errors, everything seems fine:

 

https://youtu.be/duSmlr_2ad8

 

Try to clear browser cache.

Edited November 28, 2015 by Mixa_RU (see edit history)

[OliB]

Yes for the Product Images it works.

 

But in the product description it doesn't.

 

The Orange links in the product description links to detailed pictures.

And those pictures should also open with fancybox.

[razaro]

Try to change this code from product.js in your theme js folder

			$('li:visible .fancybox, .fancybox.shown').fancybox({
				'hideOnContentClick': true,
				'openEffect'    : 'elastic',
				'closeEffect'   : 'elastic'
			});

to

			$('li:visible .fancybox, .fancybox.shown, .fancybox').fancybox({
				'hideOnContentClick': true,
				'openEffect'    : 'elastic',
				'closeEffect'   : 'elastic'
			});

[Mixa_RU]

A-h-h... I see.

 

Ok. How do you make these Orange links?

Are they come from Long description of product in your Back Office or you use some other custom way?

Can you manually add to each link class "shown" there? Because these links already have class "fancybox" so you need add class "shown" also there.

 

And probably there is difference in using class "shown" between product.tpl files (old file vs. new one after upgrade).

So better way will be add class "shown" in .tpl file responsible for this area.

[OliB]

Thats great razaro.

 

 

@Mixa_Ru  Jear maybe I do some sql work to ad "shown". The solution form razaro works, but the nav buttons still missing.

I add the links i TinyMCE manually. Therefore I customized TinyMCE and wrote my a little Plugin to insert the code ans link.

[Mixa_RU]

I wouldn't do SQL even if it solve the issue.

Better change .tpl files.

[razaro]

Sorry what nav links are missing ?

[OliB]

The little fancybox-next and fancybox-prev Arrows. To switch between the pictures are missing.

[razaro]

Well for that some more code is needed in link

 

 

 

Galleries are created from elements who have the same "data-fancybox-group" or "rel" attribute value.

 

 

from fancyBox site and gallery example

[OliB]

Hmm

 

The data-fancybox-group="other-views" code was there before the update. Maybe the TinyMCE or HTML Purifier deleted it with the update.

 

I did a SQL query with

UPDATE ps_product_lang SET description = REPLACE (description, 'class="fancybox"', 'class="fancybox shown" data-fancybox-group="other-views"')

and now it works.

 

THX for the superb support