• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1532
  • Last Modified:

How to create a round magnifying glass & additional infos for mouse over picture?

Hi Experts,

I'm trying to offer the user the following:
1. Site displays a minimized version of a class photograph
2. User moves the mouse over the picture
3. The picture is magnified in a circular area around the mouse
4. If the mouse is over a face of a classmate, some details (additional <div> e.g. First name, a newer picture, etc) are shown at another position of the screen

So far, I tried several jQuery plugins (magnifier, jZoom, ...) and plain javascripts, but:
a) the plugins used interfere (i.e. when loading jQuery BeautyTips, magnifier refuses to work).
b) I did not find anything to display a !circular! magnifying area
c) I'm stuck with the tricky details (i.e. still learning:-)

I'm hoping you could help me identifying alternatives to achieve the above use case (not to solve my current technical probs - that's filed as learning:-), either by other jQuery Plugins, plain javascripts or any other technology that is available under MIT/GNU licenses and supports clean CSS/HTML (i.e. I don't want to edit/create flash).

Many thanx in advance!
1 Solution
I suppose you could cobble up a <div> with huge dotted borders (the dots form round corners) and wrap it in a container <div> with grab handles.

Then you would have to compute the location of the two <divs> relative to the images, and display the magnified section in the "window" (no small feat, to be sure).
vzkbAuthor Commented:
Ok, here's how I did it. It is a combination of Flash (for the magnifying part) and jQuery (for the hover-event and display of addtional information elsewhere on the screen.
A running example can be found at http://www.alumni-10d.de.

* Flash Magnifier (Open Source): http://www.flashandmath.com/intermediate/magglass/index.html
This can be configured to display a round magnifyer.
It also has to be adopted to use a different picture, which means you have to edit and re-generate the flash movie.

* jQuery & events
Although the css needs some massive IE patches, the overall idea is simple:
1. add a div that overlays the flash movie
2. add boxes for the students and position them using css
3. enable mouse-over and mouse-out events with jQuery

For details, just have a look at the css sources:
# General CSS: http://www.alumni-10d.de/wp-content/themes/alumni/style.css
# Overlay CSS: http://www.alumni-10d.de/wp-content/themes/alumni/class.css
# jQuery code: http://www.alumni-10d.de/wp-content/plugins/alumni/alumni-scripts.js
Note: The code contains additional stuff for other (private) pages on the site, for the main page you only need the base package of jQuery.


Michel PlungjanIT ExpertCommented:
very cute.

Now tell us their names when clicking :)

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now