[SOLVED]fancybox in product.tpl

[tozi]

Hi all, i have a little problem but big for me with fancybox in product.tpl

 

Look here http://www.petamour.cz/knizky/139-stene.html

 

When you click in picture so image is wider then original.

 

Any idea. Where could be the problem? 

Edited June 2, 2014 by tozi (see edit history)

[PSfever.com]

Hi,

 

this so-called problem is given due to the settings of the resolution of thickbox_default image. You could either 

1) Upload larger pictures so they don't get all messed up when you click on the fancybox

2) Set the resolution of thickbox_default to be less than 600x600

3) Edit the product.tpl file and product.js file so that once you click on the fancybox, that the original image occurs

 

I would go with a) or c), but in depends on your knowledge and resources.

Hope this helps

Edited June 1, 2014 by PSfever.com (see edit history)

[vekia]

this is how it looks like for me:

 

seems like everything is allright there

[tozi]

Milos but original is 

 

You see the different width?

[PSfever.com]

The only solution I see at this point is to edit the TPL/JS file (not sure which one it is) so that it doesn't count with the height of the thickbox picture, but with the height of the original picture. At the same time you ought to change this

.fancybox-image {
max-width: 100%;
max-height:100%;
}

.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
} 

into this

.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: auto;
}

.fancybox-image {
max-width: 100%;
}

You should find these in this file http://www.petamour.cz/js/jquery/plugins/fancybox/jquery.fancybox.css

[tozi]

Thanks a lot. It is solved.

.fancybox-image, .fancybox-iframe {
display: block;
height: 100%;
}

.fancybox-image {
max-width: 100%;
margin: auto;
}

Edited June 2, 2014 by tozi (see edit history)