There are a multitude of options and technologies available, not only to developers but also regular users, for displaying a large volume of images on your website. The first that may spring to your mind are content and image sliders, which are currently very fashionable, or you would maybe be thinking of the simpler method of using a lightbox attached to your images, or it could be the more advanced option of using a dedicated gallery CMS. With all of these new technologies and fresh ideas it seems to be very easy to forget about the always reliable, traditional and timeless grid style image gallery.
In this post we take a look at 20 of the best jQuery plugins that will allow you to easily build a feature-rich image gallery ( a number of plugins support various multimedia formats like video and Flash). Some of these plugins are not the freshest but have proved time and time again to be the best and most reliable.
You might also like:
50 jQuery Plugins for Form Functionality, Validation, Security and Customization →
50 Fundamental jQuery Controls, Components and Plugins →
20 Awesome jQuery Enhanced CSS Button Techniques →
25 Useful jQuery Tooltip Plugins and Tutorials →
50 jQuery Plugins for Form Functionality, Validation, Security and Customization →
50 Fundamental jQuery Controls, Components and Plugins →
20 Awesome jQuery Enhanced CSS Button Techniques →
25 Useful jQuery Tooltip Plugins and Tutorials →
TN3 Gallery
TN3 Gallery is a fully responsive image gallery which also comes available as a WordPress plugin. There’s a lite version available for free.
Galleriffic
Galleriffic is a a feature rich , easy to customize and install jQuery plugin that has been optimized to handle a high volume of images while still conserving bandwidth. Its image pre-loading, thumbnail navigation (with pagination) and its integration with both the jQuery.history plugin (supports bookmark-friendly URLs per-image) and jAlbum plugin (thumbnail generation) that truly sets Galleriffic apart from the rest.
Downloads & Docs →View the Demo →
jPhotoGrid
jPhotoGrid takes a simple list of images and captions and turns them into a stylish grid of photos that can be easily navigated and zoomed. The beauty of this plugin is with its simplicity – The trick is to layout the grid by floating the list items, the plugin will then change these so that they are all absolutely positioned, thus allowing the user to zoom in on an individual image and then return it to its original place.
Downloads & Docs →View the Demo →
Galleria
Galleria is a highly polished jQuery image gallery framework that is very easy to use, yet loaded with advanced customization options. Galleria is not created from one single use case. Instead the developers have created a collection of tools based on common feature requests that you can use to create multiple themes based on the same core. The Galleria core and most of the themes and add-ons are open source (licensed under the MIT license), which makes it free to use, copy, sell and redistribute.
Downloads & Docs →View the Demo →
jQuery.popeye 2.0
jQuery.popeye 2.0 is an advanced image gallery script. It is very useful when space is limited by saving space when displaying a collection of images and it offers your users a nice and elegant way to show a larger version of your images without leaving the current pages flow. The plugin is quick and easy to setup and offers great flexibility in both behaviour and styling.Downloads & Docs →View the Demo →
Mobile Image Gallery Web App
This resource is more of a tutorial rather than an actual plugin, even though you can download the source files. The little gallery application, built using jTouch, shows some albums in a list view which will reveal a wall of thumbnails once it’s clicked. When a thumbnail is clicked, you get to the full image view where you can navigate through all the photos by either clicking on the navigation buttons or swiping over the image.
This app is best viewed on a mobile device like the iPhone or the iPod Touch, or in a Webkit Browser like Google Chrome or Safari.
Tutorial & Downloads →View the Demo →
AD Gallery
Whats not to love about this plugin. It is simple, yet powerful. AD Gallery is a plugin that supports many transition efects, preloades the images, with captions and… hell, it can pretty much do anythiong you would want from an image gallery, just have a look at this feature list:
Downloads & Docs →View the Demo →
YoxView
YoxView is an easy to use and feature-rich lightbox-type media and image viewer jQuery plugin. It supports most popular formats of media (images, video, inline content, iframes, Flash and more), it resizes the content to fit inside the browser's window and does have available a wide array of plugins (to display images from Flickr/Picasa and video galleries from YouTube) and skins available so that you can customise to your own personal needs.
You can also download the YoxView WordPress Plugin or the Drupal Module.
Downloads & Docs →View the Demo →
Micro Image Gallery
Here’s an improved version of the popular Micro Image Gallery, with many added new feature. Specifically the auto play function, the possibility to add descriptions for each image, and the cycle mode. Note that the auto play function can only be set if the cycle option is also set. To add descriptions for the images, just place your text inside the alt attribute of the image tag.
Downloads & Docs →View the Demo →
slideViewerPro
slideViewerPro is the direct descendant of the popular jQuery slideViewer plugin. slideViewerPro is a fully customizable jQuery image gallery engine wich allows you to create sliding image galleries for your projects and/or interactive galleries within blog posts. Each gallery generates a user-defined number of thumbnails wich can slide automatically; as with slideViewer, everthing is generated by writing just few lines of HTML such as an unordered list of images.
Downloads & Docs →View the Demo →
Galleryview
piroBox
piroBox is a small (only 12.5kb) versatile gallery plugin, with a choice of five different styles and it automaticmatically repositions the images within the browser window. You can view your gallery as either a slideshow or as a grid of single images, and does support keyboard navigation.
Downloads & Docs →View the Demo →
Pikachoose Image Gallery
Pikachoose is a lightweight jQuery plugin that allows for a simpler presentation of photos with the added option of slideshows, navigation buttons, and auto play. Pikachoose has been designed to be easily installed, easy to setup, and well… all around easy.
Downloads & Docs →View the Demo →
PrettyPhoto
PrettyPhoto is a jQuery lightbox clone that not only supports images, it also support for videos, Flash, YouTube and iframes. It’s basically a full blown media lightbox.It is very easy to setup, yet very flexible if you need to customize it a bit (don't we all). Plus the script is compatible in every major browser, even IE6!
It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash).
Downloads & Docs →View the Demo →
Multimedia Gallery for Images, Video and Audio
The idea for this gallery is to integrate video and audio as exhibit pieces alongside typical images. The gallery is built using an XML file for defining the items in the gallery and a PHP class with an XSL Stylesheet to transform the data. The XML file defines the locations of the items and their thumbnails. For video files, you can add more than one source or define a link to a YouTube video.
Once a thumbnail is clicked, you can navigate through the previews and see the descriptions (that can optionally be added to the configuration XML file). Images get resized automatically to the size of the user’s viewport. Awesome!
Tutorial & Downloads →View the Demo →
Infinite Scrolling Web Gallery
SIDEWAYS – Fullscreen Image Gallery
SIDEWAYS is a smooth fullscreen image gallery plugin. It utilizes jQuery UI, jQuery Easing and the jQuery mousewheel plugins to bring this impressive gallery together.
After selecting the image via thumbnails, SIDEWAYS automatically slides the image into the browser in full screen view, hovering the prev button will reveal the image thumbnails again.
Downloads & Docs →View the Demo →
Supersized – Full Screen Background
Now into version its third version, the very inpressive and versatile Supersized is a fullscreen image gallery that resizes images to fill the window browser while maintaining the images dimension ratio, it will cycle the preloaded images with transitions via the slideshow function and you can navigate through the images by using the pause/play and forward/back buttons.
Supersized gives the impression of being a desktop application.
Downloads & Docs →View the Demo →
Polaroid Photobar Gallery
The Polaroid Photobar Gallery, as the name suggests, gives your image gallery a popular Polaroid look. Your image albums will expand to sets of slightly rotated thumbnails that pop out on hover and the full image will slide in from the bottom once a thumbnail is clicked. In the full image view the user can navigate through the pictures or simply choose another thumbnail to be displayed.
Tutorial & Downloads →View the Demo →
jbgallery 2.0
jbgallerys function is to show a single big image, multiple images, multiple galleries, slideshows, as a site's background, in a "dialog" mode or as a common pop-up.
It has two basic menus: the first one has music player buttons while the other one links directly to single images. As of version 2.0, it has a "complex" menu, which has been inspired by the flickr slider-equipped slideshow that allows the user to scroll the thumbnail previews. It also offers a public API to remote control the component, so it would be easier to bind also with a more complex menu.
Downloads & Docs →View the Demo →
Full Page Image Gallery
This is a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.
Tutorial & Downloads →View the Demo →
No comments:
Post a Comment