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

Mouseover the image of the dental tool on this page:

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

Mouseover the same image on this page:

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?
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


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.
phillystyle123Author Commented:
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.
first make sur you have the correct doctype
<!DOCTYPE html>

Open in new window

Look at this for a basic template and make sure you have everything in the correct order.

What I suggest you to find the problem is to use the basic bootstrap template and add you image and the zoom plugin

To my opinion it is probably a code semantic problem.

I have try to compare both page code they are very different so I guess you are taking an existing template and update it to Bootstrap, which is ok.

To do that you need to know how Bootstrap work and make small test of each plugin you need, sometimes a plugin can be not compatible.

I'll recommend a free great tutorial, this course is great and it is free:

You zoom script is quite old.
You can ask the author which jQuery version is compatible with the script to make sure.

There are great scripts that you may want to try

here is a small snippet to see that is possible

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
phillystyle123Author Commented:

is the bomb.

Thanks for the help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.