We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

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

vzkb
vzkb asked
on
Medium Priority
1,562 Views
Last Modified: 2013-12-25
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!
Volker
Comment
Watch Question

Top Expert 2007

Commented:
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).
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.

Details:
* 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.

havagoodone,
Volker

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
very cute.

Now tell us their names when clicking :)
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.