Responsive web design is a hot topic right now, and if this is a design concept you’re in to and practice then you may have run in to a problem with needing to incorporate an image gallery in to a project, but not knowing how to make it responsive. Let’s keep things simple and check out a few open source responsive web galleries that are available.
Elastislide is a responsive jQuery carousel image viewer. The rotating image carousel will adjust itself automatically to present itself attractively no matter what size of screen or screen resolution the viewer has. The images will also resize themselves along with the width of the container that the carousel is in to ensure that the all of each image is viewable across various screen sizes and resolutions. You can download the source for this image carousel here.
Unoslider is a responsive image gallery that allows you to incorporate HTML rich captions and allows you to have per-slide options. The gallery is touch enabled and mobile optimized, making it a dream for people who are viewing your images from a mobile device. There are over 40 transitions to choose from and 12 prebuilt themes to use, which are easily customizable with CSS.
If you’re looking for a simple responsive slideshow, then ResponsiiveSlides.js is your answer! Designers have the ability to choose between pagination and navigation controls, transition effects, randomization, HTML captions, and so much more. It’s extremely lightweight, flyweight in fact, and won’t deliver a knock out punch when you implement it on your website.
jQuery Responsive Thumbail Gallery Plugin is more than just a long name, it’s an amazing solution for a responsive image gallery. It functions like most simple image galleries with thumbnail navigation, but is responsive and breaks itself down elegantly.
Responsive Image Gallery is a phenomenal choice for a responsive image gallery. Users have the choice of browsing photos with or without the thumbnail carousel, and if they’d prefer to use the thumbnails to navigate through the images or the next and previous buttons on the made slideshow area.
Seamless Responsive Photo Grid is an interesting approach to displaying a large amount of images on one page. Images are displayed more like a collage than a replicated cookie cutter image and thumbnail gallery all organized in to one nice looking array and labeled as a gallery. This is a fun option for the occasional project that would allow something like this, works on all major browsers, and is ridiculously easy to incorporate in to your own design. You can download the files here.
Elastic Image Slideshow is a responsive image gallery with an unobtrusive thumbnail navigation option. The thumbnails are small blocks of solid color making up a bottom border of the main image in their native state, but slide and fade in to position once hovered over. There is also an autoplay option for viewing the images if you’d like your viewers to enjoy a hands-free viewing experience. Download the source code here.
Flexslider is another stunning example of a responsive image slider. Not only is Flexslider supported in all major browsers, but it’s also programmed with hardware accelerated touch swipe support. Add custom navigation options and the ability to place any kind of HTML elements your heart desires in the slides and you’ve got yourself a fluid image slider that you can customize to work seamlessly with any design.
Blueberry is a delicious image gallery slider that was written specifically for responsive web design. It’s an experimental opensource jQuery plugin project that was originally launched in hopes of getting the designers of some of the more popular image sliders to think about making theirs responsive as well. The fact that this slider is powered by jQuery means that blueberry should not only work on your Blackberry, but your Apple as well.
About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder. Follow him on Twitter @TheScottStanton.
Today, I am giving away Web Design Riches, the ultimate guide on how to run a profitable web design business. Enter your name and email below to get instant access.