Images add life to a website. But plain simple images are now outdated. Splashy, layouts for images are the current hot trends in webdesigns. So here, I am going to provide the 30 best jQuery Photo Plugins that will help you to add an artistic and professional image galleries and slideshows to your website.
Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well all around easy. Creating an image gallery shouldn’t be a complex thing. I’ve created a new plugin that I’m packaging with PikaChoose called SliderJS.
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.
GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.
The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a “slide”. Options control how and when the slides are transitioned.
SlideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images. you pictures. Also, clicking on each image will make the gallery slide to the next picture.You can optionally customize the kind of animation and its duration and also enhance(*) the default tooltips with some fancy tooltips.
Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.
Image flow is inspired by Apple’s cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.
EOGallery is a web animated slideshow gallery maid with jQuery. It only uses basic jQuery functions and Cody Lindley’s Thickbox to display larger pictures. By the way, EOGallery is XHTML 1.0 strict valid and almost CSS valid, it has been tested on Firefox, Safari, Internet Explorer 6 and works even with non-javascript and/or non-css browsers. EOGallery has been maid for testing purposes, there could be bugs and strange behaviors. For more informations, read read FProd’s blog.
Enjoy trying it.
jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.
prettyPhoto is a jQuery lightbox clone. It has excellent animations and support themes.
A pretty neat photo slider. It featured in nettut, if you try to make yourself a photo slider.
ScrollShow is a unique photo gallery implementation that uses scrolling to display the items. It’s similar to a carousel implementation, but simpler and more flexible.
What exactly does Supersized do?
* Resizes images to fill browser while maintaining image dimension ratio
* Cycles Images/backgrounds via slideshow with transitions and preloading
* Navigation controls allow for pause/play and forward/back
Space Gallery is another fancy jQuery photo gallery plugin. click on the image will make it fade away and the next image will move forward. Bring out the beauty offading transitions with SpaceGallery jQuery Plugin.
A simple tutorial, and it shows us how to create a really simple jquery photo slideshow.
This is my first jQuery plugin and to be honest I am quite proud of it. It’s nothing complicated – a simple image gallery/viewer. When calling the plugin you specify which images you want to use like this:
$(‘div.some-images img’).gallery();
The script would take all images within “div.some-images” (or whatever you specified) and put them within the gallery.
InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.
These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.
CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.)
PictureSlides is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, and with fading effects, if desired. It can be a stand-alone slideshow or have a complete image library look with thumbnails, navigation buttons etc (an older version, which also works with DOMAssistant, is available as PictureSlides 1.0).
JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.
Gallerific is a jQuery plugin for rendering fast-performing photo galleries. Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos. This is my first experiment with jQuery, so I would love feedback on how to improve this plugin. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.
The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. I needed something like that for jQuery (for my web site kruskica.net). Since i didnt find it after a small research i decided to build it by my self. It is very easy. First include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider.
Pirobox is another JS gallery script with the difference hatwrite by Diego Valobra.Take a look at his script,you can see that he used a few tricks to get his goal to create a good looking jQuery gallery.
Popeye generates an inline image gallery from an unordered list of images. The gallery features clever inline image enlargement, i.e. the enlarged image stretches out over the site content without adding a visual overlay of the whole site. It stays fixed with one edge to its original coordinates, so that a sense of cohesiveness is created in the user interface and interaction. One image with optional caption and image counter will be displayed at a time, and the user can navigate through the entire gallery by clicking buttons that appear on mouseover.
Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.
NotesForLightBox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
The current functionalities are:
* Rounded corners light box
* Navigation with buttons
* Real slide show with progress bar
GallerifficPlus was inspired by Trent Foley’s Gallerific plugin, and Leandro Vieira Pinho’s jQuery LightBox plugin. The concept from the plugin originated from a client project that required a smooth jQuery gallery with lightbox functionality.
jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. LightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar. The better way to know what is jQuery lightBox plugin, click the Example tab above and see it in action.
29. jQuery Multimedia Portfolio
Display your portfolio items in a horizontal gallery view. A very cool jquery plugin. It is Non obstrusive and accessible portfolio supporting multiple media. It supports photos, multimedia content like flv, audio mp3 etc. It can automatically detect extension and display images/snapshots according to it. Here is a quick screen shot. Click on it for demo and download.
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.
jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch.
I need it. I try to add slider gallery in my themes. Thanks