View Full Version : HTML 5: how to make stackable images?

May 22nd, 2010, 11:32 PM
Is it possible to load up 10 images (same dimension), stack them on top of one another only showing 1 image at a time and then by holding down the left mouse button and dragging the mouse up you scroll in one direction and moving the mouse down scrolls in the opposite direction?'

if so how can this be done? canvas element would be the begining, no?

May 23rd, 2010, 05:26 AM
The same way you'd do it in HTML4.01

May 23rd, 2010, 11:39 AM
and what way would that be?

can someone give me some help or framework on how to address this? I am not sure where to start.

May 23rd, 2010, 01:43 PM
and what way would that be?

can someone give me some help or framework on how to address this? I am not sure where to start.
Not quite certain what you need. But there is much help here. (http://www.exitfegs.co.uk/Sources.html) If you find something that you can point us to, we will have a look and see where we can help. We need some more info.

Is this sort of thing (http://exitfegs.co.uk/AGallery.html) any use?

One picture is worth a thousand words. Or so they tell me.


May 23rd, 2010, 02:12 PM
What I am trying to do is make a z-index scrollable viewer for multiple images. Remeber when you were a kid you could make things animate by flipping through a paper book? in the corner of the book was the character being animated and each page was a separate frame. When you flip through the book quickly it looks like the character is walking/running/jumping?

I am trying to get the same effect but using HTML. Say my "book" has only 10 images. Each image is of the same subject matter but slightly different so scrolling through them with the mouse moves either 1 frame ahead or 1 frame backwards. The images are stacked upon one another in the z-index.

Does that make sense? I agree that a picture is worth a thousand words but I am not even sure where to start. Once I start then maybe I can provide pictures.

Thanks for replying.

May 23rd, 2010, 02:17 PM
I just found this on Google (http://jryannel.wordpress.com/2010/02/26/displaying-an-image-with-a-scroll-indicator/).

This one of mine does (http://exitfegs.co.uk/ninea.html)what I think you want. I don't know whether if could be made fast enough without javascript or other help.


May 23rd, 2010, 04:06 PM
If you want the images to change on click without page reload, then a bit of JS will be required here.

jQuery is a great JS framework which makes things like this easy, and tons of people have already created hundrereds of different image rotation gallerys with different functionality.

When somebody clicks and drags up do you just want it to flick through one image to the next image, or to continously flick through all of the images until the mouse click is released, the first is easy enough to implement but the second would probably require a bit more detail but certaintly possible i'd think.

I'd try googling around for jquery gallerys/sliders/ etc.. and see if you can find a similar one out there to what you're looking for because there are loads out there.

May 23rd, 2010, 05:46 PM
I was hoping HTML5 could do all this for me and I thought it would be a good exercise for me to get familiar with it but no one seems to be pointing me to HTML5

I can do it in JQuery I suppose so I guess I will do that and use different z-index's in CSS to overlap 1 image with the next to stack them.

When I need the image to flip to the next one in the stack I suppose I will just add a +1 to the current image being shown when the user drags the mouse up and subtract 1 from the filename when the user drags the mouse down with the LMB held.

Will report back when I have something rudimentary done. I was hoping it could all be done in HTML5

May 24th, 2010, 04:21 AM
I was hoping it could all be done in HTML5

HTML has nothing to do with presentation. Anything related to that is in the realm of CSS and javascript.