Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post

    HTML 5: how to make stackable images?

    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?
    Last edited by Bobafart; 05-22-2010 at 11:35 PM.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The same way you'd do it in HTML4.01

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    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.
    Last edited by Bobafart; 05-23-2010 at 12:57 PM.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Bobafart View Post
    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. 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 any use?

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

    Frank
    Last edited by effpeetee; 05-23-2010 at 02:05 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    Bobafart (05-23-2010)

  • #5
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    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.
    Last edited by Bobafart; 05-23-2010 at 02:14 PM.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I just found this on Google.

    This one of mine does
    what I think you want. I don't know whether if could be made fast enough without javascript or other help.

    Frank
    Last edited by effpeetee; 05-23-2010 at 02:28 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    Bobafart (05-23-2010)

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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.

  • Users who have thanked Scriptet for this post:

    Bobafart (05-23-2010)

  • #8
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    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

  • #9
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by Bobafart View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •