Conflict between twitter-bootstrap 2.2.2 css file and zoomer files

[stephane1405]

1) Script Title: Featured Image Zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

3) Describe problem: conflict between twitter-bootstrap 2.2.2 css file and zoomer files .


First of all well done for your script that looks amazing. Unfortunately when i use it with bootstrap css file there is a conflict and the hd picture is put out of shape (see attachment) .

if i remove the bootstrap css file things work fine .

I m a noob with jquery and i have no idea what to do.

Help very much appreciated.

5121

[jscheuer1]

It appears to be a simple problem of max-width: 100%; being applied to all images by bootstrap - pretty presumptuous if you ask me. Using a text only editor like NotePad, add this to the multizoom.css file:


.magnifyarea img {
max-width: none;
}


The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[stephane1405]

it works !

Thanks a lot John for your quick and precise answer.

By the way I had also commented out jQuery.noConflict() on multizoom.js

Have a good week end.

[jscheuer1]

Thanks, you have a good weekend too.

That jQuery.noConflict() is really optional. More recent DD scripts don't use it. Although this one has been updated (by me in this case) recently, I just kept it in there, for no particular reason. I guess it could be for backward compatibility though - if I needed an excuse for keeping it. It's only needed if there are one or more conflicts with other scripts on the page requiring use of the $ variable. It (noConflict mode) can even cause problems if other jQuery code on the page cannot operate in a no conflict environment.