Building websites that jive on mobile devices and scale to browser size is becoming more and more important. As a web developer and designer, you strive to ensure the website experience is generally equal on all platforms. Or, that’s at least where we seem to be headed.
This is where responsive layouts come in handy. Not only is your webpage ready to be viewed on a giant 27-inch iMac, but it looks good on a netbook, too. Do you need a mobile app? Nope! Your responsive web design renders just fine on a smartphone and tablet, too.
One of the trickiest aspects of responsive web development and design is delivering cool and slick elements. After all, everything must be resizeable.
Here are two solid looking responsive jQuery photo galleries that can aid you in delivering full scalability without loosing the eye candy:
jQuery Responsive Thumbnail Gallery Plugin
This one is really easy to use.
Link the script after jQuery, apply it to a DOM element on the document ready event, and you’re golden.
Setting configuration options include:
- thumbImages: path to the thumbnails
- smallImages: path to the small size images
- largeImages: path to the large size images
- count: number of images/thumbnails
- thumbImageType: file extension for thumbnail images (all should be the same)
- imageType: file extension for gallery images (all should be the same)
- breakpoint: width at which the small and large image sizes are swapped
- shadowStrength: strength of the shadow on the non-selected thumbs (0-1)
Download, fork and learn more on the jQuery Responsive Thumbnail Gallery Plugin website.
View.js is simple, lightweight, but mostly pretty.
This one, however, will cost you.
- $10 – Regular License
- $30 – Extended License
This really has some nice visual options without going over the top.
- Keyboard Nav
- CSS Animation
- Viewport Scaleable
- Ready for Mobile
- Smart Loading
- Swipe to View (Coming Soon!)
Demo View.js, learn more and purchase it from the View.js website.
Please, share with us any solid responsive jQuery photo galleries you’ve seen or used!