Hey guys.

 

Ok here is the deal. I am working on a small site for an artist. On his main page he wants a thumbs of 9 of his paintings, set up so that they make a large square grid. Each one of those squares would have a 'slide show' effect, and transition to one other painting. I guess it would just loop after that.

 

What do you guys think is the best way to go about this? I don't have any experience working wish Flash, so I was hoping for a non-Flash solution. If Flash is the only good way of achieving this, and anyone can recommend a tutorial I would give it a shot. But I would definitely rather use a non-Flash solution.

 

Thanks in advance for any tips.

Check out nettuts, someone over there did a really neat jQuery tutorial just recently. Using the draggable method. I think you will need UI for this.

Check out nettuts, someone over there did a really neat jQuery tutorial just recently. Using the draggable method. I think you will need UI for this.

 

 

Thanks for the tip, but that is way more complicated/advanced than I what I need.

 

I don't even need the images to have links. I just basically need 9 thumbnails in a 3x3 grid. Each one is like it's own little slide show. Each mini slide show would have 3 images. The person would have no interactivity with it whatsoever. It would just be for show.

 

Thanks

Flash it would be easy.

 

Just create a movie clip with your grid of images where each image is a movie clip with the desired animation.

 

Then bring them onto the stage at set intervals.

 

In jQuery you could give each image an ID and use the animate method to bring it onto the page. Problem is you will be working with one image and if you scale it up or down then it either squashed or pixelated.

 

You could have the thumbnails animate onto the page, then sequencially transition to a large image.

 

Give me a second and will go into PS to illustrate.

Hope that helps

Flash it would be easy.

 

Just create a movie clip with your grid of images where each image is a movie clip with the desired animation.

 

Then bring them onto the stage at set intervals.

 

In jQuery you could give each image an ID and use the animate method to bring it onto the page. Problem is you will be working with one image and if you scale it up or down then it either squashed or pixelated.

 

You could have the thumbnails animate onto the page, then sequencially transition to a large image.

 

Give me a second and will go into PS to illustrate.

 

Thanks for the help. It's a little over my head, but I am up for trying it. I just have practically no experience with Flash.

 

All the images are the exact same size. They are all cropped to be perfect squares.

I think i'm gonna try and make a video tutorial on this. It sounds easy as above but maybe not exactly like that.

Thanks for the work, I am going to look into this in the a.m. It's been a long day and I don't have the focus for this tonight lol. Need fresh eyes.

This incredibly small program will make animated gifs http://www.whitsoftdev.com/unfreez/ I've used it myself. the delay is in centiseconds so 300 is 3 seconds.

 

It won't link one animated gif in sequence with another animated gif. If you want one to finish at a place where the next starts its sequence, it can't do that.

Okie so i have ended up spending lots of time on this and it is still not complete although fairly primitive in usage.

 

It is also broken right now as it is not an infinite loop so once you click the 9 images and also the background cycles through them then it's out of commision.

 

Plans are to fix the loop and also when you click link to grab the right image.

 

http://pixelcoder.co.uk/demos/gridmate/

 

It's not really what you asked for, it started as that but grew into something a little more generic. I plan to make this a jQuery plugin and have options to Autoplay etc, in which case a dialog won't be brought up but something more inline with what you were asking to start.

 

Anyway would love to hear your thoughts and will write / record a tutorail once it's all finished.

 

.eq() is a great jQuery function! It works perfectly with the each loop if anyone is interested. The each loop counts the amount of elements in the wrapper (ul in this case) and eq allows you to target each element incremetally.