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

Posted on 2009-02-11
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!
Question by:vzkb
    LVL 29

    Expert Comment

    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).
    LVL 1

    Accepted Solution

    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

    * Flash Magnifier (Open Source):
    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:
    # Overlay CSS:
    # jQuery code:
    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.


    LVL 75

    Expert Comment

    by:Michel Plungjan
    very cute.

    Now tell us their names when clicking :)

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    The viewer will learn how to count occurrences of each item in an array.
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now