Many people often use image galleries to organize and showcase their pictures on their websites. A traditional image gallery usually consists of images of the same size displayed in a grid layout. When an user clicks on an image thumbnail, the picture enlarges and is displayed in a modal window. There are arrows to navigate through the pictures in the modal window so that the user does not have to keep closing and reopening to see a new image. In the past, we have implemented a nice looking traditional image gallery for one of our clients, Four Sea Restaurant. Check out Four Sea Restaurant!

Four Sea Restaurant

If you wish to display images which have different thumbnail sizes, it is best to use a pinterest style image gallery. A pinterest style image gallery can dynamically adjust its layout to fit thumbnails of different sizes into the page. It does not matter in which order you put the pictures because all thumbnails will display in a fluid (responsive) grid layout. Check out Amphibianarc!


Today I am going to showcase a more advance image gallery. What makes this image gallery different from the previous examples is that this gallery uses CSS3 transitions for the navigation in the popup modal window and the dynamic layout also changes in the thumbnail grid view. In addition to smoother transitions, the title and content related to the image are also more legible (larger text) compared to the traditional popup modal window (smaller text). Even if it is not difficult reading smaller title/captions in a traditional image gallery via desktop, I am sure everyone finds it hard to read that same text on their mobile phones. This gallery makes it possible to stretch the modal window into full screen so that you can put more content for your images without worrying about readability. Resize your browser or open this page on your smartphone to see this how this gallery works:

CSS3 transitions is well supported by all major browsers. If you want to have a nice responsive image gallery on your website or if you want to improve your current one. Ready Artwork is here to help!