D
david.karr
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
external.
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.
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
external.
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.