Fancy-box aspect-ratio not right!

[Roych]

I'm having some trouble with fancy-box.
It's working fine but all images are not in the real aspect ratio when opened, how do I fix that?

I looked over on the forum, but couldn't find the answer to that.


Thank you very much.


R.

[Ruud]

FancyBox is not a WebsiteBaker product, so technical help fot the script will be hard to get.

On the other hand. I have made many websites with FancyBox without problems. So it is not to be expected the problem lies in FancyBox itself but more probably in some css in your template.

For those kind of problems it will be impossible to help without being able to have a look at the problem.

[Roych]

Thx for help It's my first time using FancyBox plugin.

Ok, I understand I have try to look for any css that could make this but have found nothing 

Here is the URL so you can see what happens when you click on image (small logos)
http://www.bi-center.eu/en/about-bic/

Thank you.

R.

[dbs]

Hi, first you should fix the js-errors.
Comment out the line

Code: [Select]

// register_frontend_modfiles('jquery') because you load jQuery below again.

[Ruud]

2 things..

1. you are loding jQuery more than once, causing other plugins to crash.

2. the fancybox script that is used is version 1.0.0 (2008). That might be not completely compatible with the modern bootstrap framework. Not sure what module you are using, but I would either try to upgrade the script/css or use another module/script

[Roych]

Thx for reply

I removed the

Code: [Select]

// register_frontend_modfiles('jquery')
Still the same..

@Ruud

What script do you prefer this was the only one I found, can you please point me to a better one maybe?

Thank you very much

R

[instantflorian]

Hi,

have a look at the colorbox snippet. Just install and give the image links the class "colorbox".

Impressive site btw.

BR
-f.

[Roych]

Hi,

have a look at the colorbox snippet. Just install and give the image links the class "colorbox".

Impressive site btw.

BR
-f.

Thx, I tried the colorbox you posted above, I installed, gave the image a class of colorbox, but it just opens in another window. I tried in image properties and manually it's not working. Do I have to put some code in my template like in fancybox or should this be working as is..?

Thank you, the site is still under construction, waiting for more content atm. Glad you like it..

Thank you

R

[instantflorian]

Hi,

possible reasons:
- Colorbox collides with Fancybox or one of the fantastillion other scripts which are loaded
- the colorbox script does not work with the jQuery version 1.11
- jquery is several times loaded (1st time in the head, 2nd time jQuery 1.7.1 where Fancybox is loaded)
Sad enough, but maybe it's better not to rely to the outdated and abandoned WB snippets like fancybox/colorbox in combination with bootstrap and all that other modern stuff. So I would remove colorbox and fancybox and call a timely lightbox script the same way like already CloudZoom, InstaFeed, JackBox, MixItUp etc. etc.

BR
-Florian.

[Roych]

I have tried to remove all loaded jquery uninstalled colorbox and fancybox and tried to use some other script but can't get it to work at all, the only one that is working is fancybox but with aspect-ratio problem.

Out of ideas

thank you
R

[Ruud]

This - very old - fancybox version will not work together with the bootstrap framework.

This rule in bootstrap.css:

Code: (bootstrap.min.css) [Select]

* {
    box-sizing: border-box;
}
will make all "older" lightbox scripts behave wrong. They are not able to calcuate the correct paddings/margins.

For testing, try adding in your style.css (loaded after bootstrap.min.css) on the first line:

Code: [Select]

* {
    box-sizing: content-box;
}
This will set the box-sizing to the default value defined in browsers.

You will notice the fancybox popups work fine now.
The bad part is the rest of the website will look bad (Bootstrap relies heavy on the "border-box" value.

For the rest..
Start using a tool like FireBug or the WebdDeveloper Toolbar in Firefox (or just F12 in most browsers) and look at the javascript errors on your site.
Right now, some jQuery scripts are loaded and called before jQuery is loaded. As long as there are errors in the (javascript) console your website will not work as it was intended to work!