First attempt at a gallery javascript

A friend asked me to put together a gallery site for them so I’ve been playing around with doing an animated one in Javascript/CSS… It does a few things using really simple code that you’re welcome to look it (I’m not a Javascript programmer by any means), including auto-centering the page based on browser resolution, trig math to do a nice animation of the thumbnails including opacity and z-index manipulation, and shaped images using PNG layering. Click it to check it out. I know it works in Firefox best, but it should work in most modern browsers… To be clear there’s no Flash or anything like that in it. I’ll probably add image fade/transition to it still and some other tweaks.

test

7 Comments

  1. Kathryn wrote:

    i really like how the pictures rotate and you can click and the enlarge in the center.. makes it a lot more interesting than just clicking on the *next* button to a gallery!

    Wednesday, March 25, 2009 at 8:59 pm | Permalink
  2. Andrew wrote:

    It’s nice, and certainly easy to navigate. My concern with the design, unless I missed something, is that it will become somewhat unwieldy with a larger library of images. As the images rotate, there doesn’t seem to be anyway to stop or rewind the rotation, nor access to any sort of index.

    Maybe the default view could have all th images in thumbnail form in the frame, instead of just a welcome image. And you could re-open the thumbnails by clicking anywhere in the background, which currently takes you back to the welcome image.

    Thursday, March 26, 2009 at 4:49 am | Permalink
  3. Shannon wrote:

    Andrew, yes, I agree, but it’s for a gallery with about a dozen photos.

    Thursday, March 26, 2009 at 7:31 am | Permalink
  4. JuanKi wrote:

    Are you kidding me? You did this without knowing/playing around with Javascript?!
    Sheesh Shannon!

    Looks great, the rotating thumbs menu is amazing. It did take a little for the enlarged image to appear but apart from that I’m liking it a lot.

    Maybe also consider stopping or slowing down the rotation when you rollover the thumbs.

    Thursday, March 26, 2009 at 7:35 am | Permalink
  5. Shannon wrote:

    I made an earlier one as well that has a LOT of BUGS in it… but it’s interesting because it rotates the thumbnails BEHIND the frame as well…

    But if you’re interested, it’s here:
    http://www.zentastic.com/temp/www2/test.html

    It’s REALLY simple to do this sort of thing… The javascript code required to do so is very short.

    Thursday, March 26, 2009 at 9:45 am | Permalink
  6. Jonathan wrote:

    this is quite nice, I’m still trying to figure out a way to do my galleries for my new blog…lol

    Thursday, March 26, 2009 at 1:52 pm | Permalink
  7. Looks really awesome! I’d love to learn how to do that…

    Wednesday, April 1, 2009 at 1:50 pm | Permalink
Wow Shannon, that's really annoying! What is it, 1997 on Geocities? Retroweb is NOT cool!

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*