First of all was MaxDesign's Floatutorial, a lovely little tutorial on using CSS for a wicked thumbnail display. I will have a little play with this and try and find the optimum size for my thumbnails. The tutorial includes captions underneath each thumb which is really handy, as I have imagined having an 'info' link underneath each thumb, which will then take the user to a page from where they can read a bit about the painting.
The second little gem was actually something I've seen before but never managed to get working. Lokesh Dhakar's Lightbox JS is a really cool little script. Basically, you click a thumbnail and the full size pic will appear over the top of the page while the background is simultaneously dimmed. When you close the lightbox you are back on the gallery page. Check it out, it's easier to understand when seen. It's customisable via CSS and is quick to load.
I've sketched what I was thinking at the time, I think it's cool:
As you can see, from the main gallery page you can click a thumb to see a large version in the LightBox, or you can click the 'Info' button under the thumb which takes you to an 'item info' page - from there you can add the painting to the shopping cart. I want the application to then take the user back to the gallery with the product added to basket.
No comments:
Post a Comment