If your website relies heavily on images, then having an image gallery is a great way to showcase your content on your website. Having said that, this idea may also backfire if visitors are coming from a mobile or touch device. Mobile users deserve some love too, hence the purpose of today's post.
There are a variety of responsive image galleries, slideshows and sliders to better manage your photos, screenshots and other forms of images on your site. Some incorporate transition effects, fade-in, fade-out and other effects, as well as thumbnail views of the gallery for faster access, flexibility and ease-of-use to view your site in full all-out browser mode and palm-sized smartphone screens.
To make it easier for you to find the right pick for your website's needs, we have put together a showcase of the best 10 galleries, slideshows and sliders we know of. They are all available for free, making them the perfect addition to position your website well for optimized browser and mobile viewing.
FlexSlider – [demo | download]
An image carousel complete with slide effects and fade animations created by Woothemes, FlexSlider 2 showcases photos and/or videos, and works on all major browsers.
Elastislide – [demo | download]
"Inserting the carousels structure into a container with a fluid width will also make the carousel fluid." Made sense to us but check out the demo for a in-depth look at 5 demonstrations of the potential behind this concept.
Responsive Image Gallery – [demo | download]
Want to give your readers fast access to all images in the same album? Then this is the best gallery mode for you. With options to slide through the thumbnail carousel or through the photos themselves, this method is not unlike how you view the gallery in some smartphones, making it an intuitive experience.
Supersized – [demo | download]
Prefer to showcase your photographs in full-screen mode? Try this Supersized slideshow that resizes your photographs to fit the viewer's screen, no matter the dimensions.
Photoswipe – [demo | download]
This one works with a build from mobile first approach. Images will swiftly rescale to fit orientations, portrait or landscape and users are treated with both a full gallery view and individual image views that they can easily swipe through. It works perfectly for desktop browsers too.
ResponsiveSlides.js – [demo | download]
Care for a lightweight and responsive slider plugin that works on all major browsers including IE6 to IE9? Set your images sliding with this very responsive slider plugin.
Another lightweight jQuery photo slider, this one features a sliding transition and will snap back to the first image in the queue once the viewer reaches the end of the slideshow.
Apart from the not-so-common transition effects, this slideshow also has autoplay options (that stops itself when you hover over it), caption and pagination support. It also supports html elements and videos.
RefineSlide – [demo | download]
With a variety of transition formats including 3D transform support, refineslide allows you the luxury to mix-and-match your slideshow effects. It also has good browser support, and a Javascript fallback as well as caption support.
A responsive Javascript image gallery that reacts to dynamic measures and media queries. Get quick access to the full album, slideshow video, caption, pop-out option, and full screen mode all in one bar below the photo gallery.
Bonus:
FlexSlider feat. Kwiks – [demo | download]
Folks at webcodebuilder combines Woothemes' FlexSlider and Jeremy Martin's Kwicks into one responsive jQuery plugin they call the -FlexSlider feat. Kwiks. This plugin displays Kwicks accordion on higher resolutions, and use FlexSlider on smaller resolution.
courtesy: http://www.hongkiat.com/blog/free-responsive-image-gallery/
No comments:
Post a Comment