asked on

Image zoom with jquery - enlarged image placement is being thrown off by bootstrap.css

Mouseover the image of the dental tool on this page:

http://roydent.com/endodontic/c-files.asp

and you'll see that there is a zoom effect happening right over the image.

Mouseover the same image on this page:

http://roydent.com/endodontic/bs-c-files.asp

and you'll see the zoom image displays on the right edge of the browser window instead of directly over the dental tool image.

I've narrowed this down to bootstrap.css. If I remove it, the hover works perfectly. So, it's something in bootstrap.css but I can't narrow it down.

Any ideas what might be causing this?

lenamtl

Hi,

The problem is the zoom is call before jquery.
jQuery link should always be the fisrt js script link on your page
So move all js links after the jquery links.

This should fix the problem.

Use Chrome dev tool to see the errors you have a few errors on both page.
You will see there is one error jQuery is not defined..

You can also contact the zoom script author to get support as it is a premium script.

phillystyle123

ASKER

Thanks for the help, lenamtl. Unfortunately, jquery.js's placement in the code isn't affecting where the zoom mouseover occurs - but I did take your advice and clean that bit up.

If I remove bootstrap.min.css, the zoom works correctly (but I lose my styling of course) so it has to be something in the bootstrap css that's affecting my zoom.

I've attached examples of the bootstrap zoom as well as the one that works properly.
screenshot-bs-zoom.jpg
screenshot-non-bs-zoom.jpg

ASKER CERTIFIED SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

phillystyle123

ASKER

THIS:

https://github.com/marcaube/bootstrap-magnify

is the bomb.

Thanks for the help.