Home >> Programming >> 10 Amazing Responsive Image Galleries
10 Amazing Responsive Image Galleries

10 Amazing Responsive Image Galleries

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

 

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

 

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.

 

ResponsiveSlides.js

 

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 Thumbnail Gallery Plugin

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.

 

Photo Swipe

 

Photo Swipe is a free image gallery developed with HTML, CSS, and JavaScript that is specifically targeted for mobile devices.  This image gallery is compatible on the Apple mobile iOS operating system, android powered devices, and blackberry mobile devices.  It’s easy to install, easier to use, and comes with a gaggle of configuration options so you can fine-tune it just the way you’d like to.

 

Responsive Image Gallery

 

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

 

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

 

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

 

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

 

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.

Ultimate Designer Toolkit

About Scott Stanton

Scott Stanton has spent the past decade working nights developing HTML websites as a freelance web designer, only to write about the latest HTML website design trends at his day job as a freelance writer. Scott is a regular contributor for Wix.com and you can hang on his every word @TheScottStanton

12 comments

  1. Colin Crawford

    I’m using the Elastic Image Slideshow developed by Mary Lou and it is great, it can be seen here http://www.colincrawford.co.uk/

    The tutorial was easy to understand and I easily set it up in WordPress.

    Thanks Mary Lou

  2. Keith

    Your website is one of the best sources of inspiration when I need ideas for my next web project. I think some of these galleries and sliders would be perfect for my first wordpress theme when I finally get around to developing it. I really want to make it responsive and this can be another piece of the jigsaw. Thanks again for the great list!

  3. amitabha ghosh

    It’s a great collections. I have used one to two previously but as a whole a magnificient collecttions. Thanks.

  4. Ken Nangle

    Really…these are incredible. Thanks.

  5. Design studio ProGrafika

    Wooow. Grate! Thanks!

  6. Apartamentos La Manga

    Thank you very much of this info. I think that the best plugin is photoswipe. I even found a wordpress plugin based on it, and it works amazing !

    Alberto

  7. Mohammad Ali Akbari

    I’m looking for a jQuery-free responsive slideshow. I thing we can have one only with CSS. is there any one?

  8. Mayank

    Nice collection—————– keep it up.

  9. sakshi

    Thanks for sharing great collection of responsive image gallery. I have previously used jQuery Responsive Thumbnail Gallery Plugin . Rest i will try now.

  10. neloy

    your collection is so color full and eye caching.

  11. Master of soft

    really helpful collection.

  12. Paul

    awesome galleries nice collection

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

10 Amazing Responsive Image Galleries