Jul 22, 2009

Building a Simple Art Gallery in Blogger


I've been wanting to try this for ages so I spent a few hours tonight trying to sort out a page design. Here are some things I tried that might help you accomplish the same type of design.
  • I built the Gallery in a separate blog and stripped out all of the posting elements to give the page a cleaner look.
  • I then created a left justified, 3 column table inside the blog post to contain the thumbnail images of the art I wanted to display. I used image links from my FLICKR library.
  • I wanted to make a gallery that would allow a visitor to zoom in on any image for a closer look without leaving the page so I used a cool CSS trick I found here. The page looks a little lop-sided at first but as soon as your mouse hovers over a thumbnail the page fills with an image.
  • I had to tweak the code slightly to get the larger pop-up image to dynamically position itself to the right of the thumbnails. This was done with a left: 45% command instead of an absolute position like left: 400px.
  • Finally, I used a few of the "Useful Blog Tools" on my sidebar to dress things up: Image Reflection and Menu Builder.
I'm quite pleased with how this turned out. Click on this Gallery Link to view the page. You can also get to it from my Quick Launch Menu at the top right of this blog.

My next update for this gallery blog will be to put [Next] and [Back] buttons on the bottom of the post so I can add pages with more thumbnail images. I'd also like to add direct links to product pages in my ArtFire store!

Please leave comments/feedback so I can improve the design even more!

Twitter DiggIt! StumpleUpon Del.icio.us Technorati Reddit

2 COMMENTS - Click here to leave YOURS!:

storybeader said...

that's really cool! I don't know if I have the energy for 2 blogs.... Though I have 3 shops - actually more, but I don't even look at the others anymore! Love how the image enlarges! {:-D

Dusik said...

what a great idea! i never thought of this, but it surely does work nicely!

and i love your art too.
i especially loved the cat with the dentures :)

Blog Widget by LinkWithin