Advice on sample project animating thumbnail to fullsize?

Discussion in 'Javascript' started by david.karr, May 18, 2008.

  1. david.karr

    david.karr Guest

    I'm considering building a small sample app, just to explore some
    javascript concepts, including animation. I could use some general or
    specific advice on what I'm trying to do, including any pointers to
    sample apps that do some of the things that I'm intending to do. I'll
    probably use YUI components, just because I'll probably be building
    other projects with that, although it's probably overkill for this.

    I'm visualizing a page that shows a collection of thumbnail images on
    first display. Below the thumbnails is a blank area. I call the top
    area the "shoebox" and the bottom area the "lightbox".

    When the mouse hovers over a thumbnail, an animation will occur from
    the thumbnail into a currently blank area of the lightbox, seemingly
    expanding the thumbnail into the full-size image. In reality, it's
    just displaying the full-size image that's associated with the
    thumbnail. The animation really could just be the box outline moving
    and expanding to where the full-size image will display. I think I've
    seen another page that does something like this, but I don't remember
    where I saw it.

    My HTML body will just contain nested divs, where the "shoebox" div
    contains multiple "photopair" divs, each of which contains a
    thumbnail, fullsize, and caption (class names) div. The CSS will set
    the fullsize and caption divs to display:none. All of my css and
    javascript (except perhaps for a single event listener) will be

    The "lightbox" div will be initially empty. When I populate full-size
    images into the lightbox, I assume I'll have to figure out how to
    "clone" the elements (fullsize and caption) to go inside a dynamically
    created div.

    With no other actions, when the mouse goes out of the thumbnail, the
    div containing the fullsize and caption will be removed. If the user
    clicks the mouse on the thumbnail, the fullsize and caption div will
    be "locked" into the lightbox (I'll probably change the border color
    on the thumbnail to indicate this), so that if they then hover over a
    different thumbnail, both fullsize images will be in the lightbox.
    When the user clicks on the locked thumbnail again, the fullsize/
    caption will disappear from the lightbox.

    Thanks for your advice.
    david.karr, May 18, 2008
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mike P

    animating images on a webpage

    Mike P, Nov 13, 2003, in forum: ASP .Net
    Nov 13, 2003
  2. David Lozzi
    john smith
    Feb 1, 2006
  3. Jason Brown
    Sep 28, 2005
  4. Albert

    Animating sine waves

    Albert, Jan 18, 2008, in forum: Java
    Thomas Fritsch
    Jan 20, 2008
  5. Chris Moltisanti
    Chris Moltisanti
    Jun 6, 2006

Share This Page