work smart !!

Photo Gallery, picture gallery, or slideshow are the best way to showcase your images / photos to your readers. This post is a showcase of 20 best jQuery slideshow / photo gallery plugins .

20 Best jQuery Slideshow / Photo Gallery Plugins

1. Galleria

Galleria is a JavaScript image gallery unlike anything else. It can take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for any project.

2. Galleriffic

Galleriffic is a jQuery Slideshow plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.

3. Nivo Slider

Nivo Slider is a lightweight jQuery Slideshow  plugin for creating good-looking image sliders.

4. Avia Slider

AviaSlider is a jQuery Slideshow plugin with very unique transition effects.

5. Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.

6. Image Flow

Image flow is inspired by Apple’s cover flow. The javascript renders the cover flow effect without any noticeable flaw.

7. SpaceGallery

SpaceGallery is onother cool jQuery Slideshow plugin  display Your images.

8. jQuery Gallery Scroller

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally.

9. prettyPhoto

jQuery Lightbox clone, pretty similar to original Lightbox with few another features and full documentation.

10. s3slider

JQuery Slideshow with three different features and displaying sides, fully customizable sizes, delay speed and with good documentation.

11. GalleryView

This is a cool jQuery Slideshow Plugin to show images as gallery

12. Supersized

Supersized is an image gallery built by BuildInternet.com and it is able to slideshows the images with full screen.

13. EOGallery

EOGallery is a web animated slideshow gallery made with jQuery.

14. PictureSlides

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.

15. Pirobox

Pirobox is lightweight jQuery Lightbox script.

16. CrossSlide

CrossSlide is a jQuery plugin implementing some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!)

17. ColorBox

18. Coin Slider

jQuery Image Slider with Unique Effects.

19. jQuery.popeye

jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery.

20. Smoot Div Scroll

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scroling to distinct steps. As the name of the plugin hints, scrolling is smooth.

Related posts:

1. 20 Awesome jQuery Lightbox Plugins Share jQuery is a powerful tool in the hands of developers and some even call it a flash killer as...
2. 25 Beautiful Examples of CSS and jQuery Drop down Menu Tutorials Share Here you will find 25 high quality CSS and jQuery drop down menu examples or just multi level menu...
3. 21 Best jQuery Tooltip Plugins, Demos, Examples & Tutorials Share Today we are posting some attractive, Handy and useful jquery Tooltip plugins for your new projects. If the tooltip...
4. 50 best photoshop photo effects tutorials Share I’ve collected 50 best Photoshop photo effects tutorials that will inspire and help you to master Photoshop photo effects...
5. 40 Beautiful Examples of Ajax CSS forms styling Share Forms are an important part of every website. It can be as simple as getting subscribed to website RSS...
   
   

DOM selector

$('element'); //=> DOM element object 

$('#element'); //=> jQuery(Array-like Object) object 



$('element'); //=> DOM element object 

$('#element').get(0); //=> DOM element object 



$('element1','element2','element3'); //=> Array 

$('#element1,#element2,#element3'); //=> jQuery object 



element.down('div.item'); //=> DOM element object 

element.children('div.item'); //=> jQuery object 



element.up('div.contents'); //=> DOM element object 

element.parent('div.contents'); //=> jQuery object 



element.up('div.container'); //=> DOM element object 

element.parents('div.container:first'); //=> jQuery object 



element.next('div.item'); //=> DOM element object 

element.next('div.item'); //=> jQuery object 



element.previous('div.item'); //=> DOM element object 

element.prev('div.item'); //=> jQuery object 



element.select('div.item'); //=> Array 

element.find('div.item'); //=> jQuery object 



$('element').select('input[type="button"]'); //=> Array 

$('#element input[type=button]'); //=> jQuery object 



$$('#element a[href=#]')[0]; //=> DOM element object 

$('#element a[href=#]')[0]; //=> DOM element object 



element.select('input.cancel', 'input.submit', 'a.close'); //=> Array 

element.find('input.cance,linput.submit,a.close'); //=> jQuery object 



element.nextSiblings('div.item'); //=> Array 

element.nextAll('div.item'); //=> jQuery object 



element.previousSiblings('div.item'); //=> Array 

element.prevAll('div.item'); //=> jQuery object

Event

var expand = function(event) { 

  event.element(); //=> DOM element object 

event.target; //=> DOM element object 



  event.pointerX(); //=> absolute horizontal position for a mouse event 

event.clientX; //=> absolute vertical position for a mouse event 



  event.pointerY(); //=> absolute horizontal position for a mouse event 

event.clientY; //=> absolute vertical position for a mouse event 



  event.stop(); // stop bubbling 

event.stopPropagation(); // stop bubbling 

}; 


element.observe('mouseup', expand); //=> DOM element object 

element.bind('mouseup', expand); //=> jQuery object 



document.observe('dom:loaded', expand); //=> document object 

$(document).ready(expand); //=> jQuery object 



element.stopObserving('mouseup', expand); //=> DOM element object 

element.unbind('mouseup', expand); //=> jQuery object 



element.observe('click', expand); //=> DOM element object 

element.click(expand); //=> jQuery object

Element

element.remove(); //=> removed DOM element object 

element.remove(); //=> removed jQuery object 



var img = new Element('img',{src:'/images/sample.gif',id:'my-img',alt:'img'}); //=> DOM element object 

var img = $('<img src="/images/sample.gif" id="my-img" alt="img">'); //=> jQuery object 



var el= new Element('a',{href:'http://firejune.com',className:'link'}).update('ClickMe!'); //=> DOM element object 

var el = $('<a href="http://firejune.com" class="link">').html('ClickMe!'); //=> jQuery object 



element.update('<p>hello!</p>'); //=> DOM element object 

element.html('<p>hello!</p>'); //=> jQuery object 



element.insert({top:img}); //=> DOM element object 

element.prepend(img); //=> jQuery object 



element.insert({bottom:'<p>hello!</p>'}); //=> DOM element object 

element.append('<p>hello!</p>'); //=> jQuery object 



element.insert({before:el}); //=> DOM element object 

element.before(el); //=> jQuery object 



element.insert({after:'<p>hello!</p>'}); //=> DOM element object 

element.after('<p>hello!</p>'); //=> jQuery object

Style

element.setStyle({width: '100px'}); //=> DOM element object 

element.css({width: 100}); //=> jQuery object 



element.getStyle('width'); //=> '100px' 

element.css('width'); //=> '100px' 



element.getWidth(); //=> 100 

element.width(); //=> 100 



element.getHeight(); //=> 100 

element.height(); //=> 100 



element.hide(); //=> DOM element object 

element.hide(); //=> jQuery object 



element.show(); //=> DOM element object 

element.show(); //=> jQuery object 



element.addClassName('active'); //=> DOM element object 

element.addClass('active'); //=> jQuery object 



element.removeClassName('active'); //=> DOM element object 

element.removeClass('active'); //=> jQuery object 



element.hasClassName('active'); //=> DOM element object 

element.hasClass('active'); //=> jQuery object 



element.toggleClassName('active'); //=> DOM element object 

element.toggleClass('active'); //=> jQuery object

Enumerable

elements.each((function(element, index) { 

  //=> DOM element object, index 

}); 

elements.each(function(index, element) { 

  //=> DOM element object, index 

}); 


elements.invoke('remove'); 

elements.remove();

Ajax

var form = $(formElement); 


new Ajax.Request(form.action, { 

  method: form.method, paramitors: form.serialize(), 

  onSuccess: function(transport) { 

    //=> transport object(Text or JSON or XML) 

}, 

  onFailure: function(transport) {}, 

  onComplete: function(transport) {} 

}); 


$.ajax({ 

  url: form.get(0).action, type: form.get(0).method, data: form.serialize(), 

  success: function(transport) { 

    //=> transport string or json object or xml node 

}, 

  error: function(transport) {}, 

  complete: function(transport) {} 

});

Effect

element.fade({duration: 0.5}); // => instance of effect 

element.fadeOut(500); //=> jQuery object 



element.appear({duration: 0.5}); // => instance of effect 

element.fadeIn(500); //=> jQuery object 



element.slideUp({duration: 0.5, afterFinish: callback}); // => instance of effect 

element.slideUp(500, callback); //=> jQuery object 



element.slideDown({duration: 0.5, afterFinish: callback}); // => instance of effect 

element.slideDown(500, callback); //=> jQuery object 



element.morph({ 

  style: 'width: 100px; height: 100px; opacity: 0.5;', 

  duration: 0.5, 

  transition: Effect.Transitions.linear, 

  afterFinish: callback 

}); // => instance of effect 



element.animate( 

  {width: 100, height: 100, opacity: 0.5}, // style properties 

500, // duration 

'linear', // easing 

callback 

); //=> jQuery object 

Browser detection

Prototype.Browser.IE; //=> true or false 

$.browser.msie; //=> true or false 



Prototype.Browser.Webkit; //=> true or false 

$.browser.safari; //=> true or false 



Prototype.Browser.Gecko; //=> true or false 

$.browser.mozilla; //=> true or false 



Prototype.Browser.Opera; //=> true or false 

$.browser.opera; //=> true or false