1.

Galleria

2. Responsive Image Gallery

3. Supersized

4. S3 Slider

5. jQuery Panel Gallery

Best 5 jQuery Script for Gallery : >

1. Galleria
Galleria is a JavaScript image gallery framework that makes the procedure easy for creating beautiful image galleries for various web and hi-tech mobile devices. Apart from image galleries, it also works on video by integrated API like YouTube, Vimeo and

Dailymotion videos works.

Free without restrictions

Galleria and the classic theme are open sources and released under the MIT license without any restrictions.

No programming skills required

With just simple copy/paste of a few lines of code, add some photos or videos and pop a fully featured gallery in your browser.
Flickr, Picasa, YouTube and more

Grab galleries, sets and movies from renowned sources of Galleria gallery by just a few lines of code.

Responsive Galleria reacts to dynamic measures and prepared for responsive environments by the media queries using simple options. iPhone, iPad & touch support For ultra-smooth image browsing on mobile and touch devices Galleria is perfect as it supports swipe movements and use hardware optimized animations. One core, multiple themes

A great set of tools is available via Galleria to create tailored themes for your project or you can browse through our Premium themes and see if something fits as per your desire.
Download Link : http://galleria.io/static/galleria-1.2.9.zip

Check Out Premium Themes :

Azur

A theme Inspired by the french riviera. Buy Now $29

Twelve

The twelve theme demonstrates the full power of Galleria.

Buy Now $29

Fullscreen

A great looking full screen gallery that covers the entire browser area. Buy Now $9

Folio

The perfect theme for photo portfolios, featuring thumbnail grids and full screen view. Buy Now $29

Miniml

A minimal theme with dotted navigation and nifty details. Buy Now $29

Responsive Image Gallery with thumbnail carousel is an innovation of Twitters user gallery. With a command to show an integration of Elastislide, the gallery acclimate the view-port width. With the perfectly designed view switch, the gallery will allow user to view with the thumbnail carousel or without. Navigation with the keyboard will also accessible for user. To navigate the images by wiping on the iPhone and iPad, the jQuery

Touchwipe Plugin will make it possible for quick response. One can easily find
the demo by clicking Flickr photostream here: Sherman Geronimo-Tans Flickr Photostream. The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.

Sample :
THE MARKUP :

<div id="rg-gallery" class="rg-gallery"> <div class="rg-thumbs"> <!-- Elastislide Carousel Thumbnail Viewer --> <div class="es-carousel-wrapper"> <div class="es-nav"> <span class="es-nav-prev">Previous</span> <span class="es-nav-next">Next</span> </div> <div class="es-carousel"> <ul> <li> <a href="#"> <img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="Some description" /> </a> </li> <li>...</li> </ul> </div> </div> <!-- End Elastislide Carousel Thumbnail Viewer --> </div><!-- rg-thumbs --> </div><!-- rg-gallery -->

Go to Link for more info: http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/ For demo: http://tympanus.net/Tutorials/ResponsiveImageGallery/ Download Link: http://tympanus.net/Tutorials/ResponsiveImageGallery/ResponsiveImageGallery.zip?84cd58

3. Supersized
Supersized is a fullscreen slidehow jQuery plugin, which quickly support image preloading with image cycling and transitioning effects. Download the latest version of Supersized as it comprises various examples to serve as foundation for your projects and it is quite easy as well.

Options :
Autoplay Fit_always Fit_landscape Fit_portrait Horizontal_center Image_protect Keyboard_nav Min_height Min_width New_window Pause_hover Performance Random Slides Slideshow Slide_interval Slide_links Start_slide Stop_loop Thumb_links Thumbnail_navigation Transition Transition_speed Vertical_center

See Demo: http://www.buildinternet.com/project/supersized/default.php Download Link: http://www.buildinternet.com/project/supersized/supersized2.zip

4. S3 Slider : JQuery Image Gallery

S3 Slider is a jQuery plugin with nice effects and self image changing feature in it. It allows user to enjoy the self sliding and self changing images.

HOW TO USE:
It is very easy. First get the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider. jQuery can be download from jQuery`s homepage. < script src="js/jquery.js" type="text/javascript">< /script> < script src="js/s3Slider.js" type="text/javascript">< /script>

HTML: <div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="#"> <span>Your text comes here</span> </li> <li class="s3sliderImage"> <img src="#"> <span>Your text comes here</span> </li> <div class="clear s3sliderImage"></div> </ul> </div>

CSS:
#s3slider { width: 400px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #s3sliderContent { width: 400px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0; /* important */ } .s3sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ }

.s3sliderImage span { position: absolute; /* important */ left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 374px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ top: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ } .clear { clear: both; }

Then you need to initalize s3Slider and set the duration of how long will one picture be shown on the page (value is in miliseconds). ? 1 2 3 4 5 6 $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 4000 }); }); Take a look at the live example. Download: http://s3slideroriginal.googlecode.com/svn/trunk/s3SliderPacked.js

5. jQuery Panel Gallery Plugin To the proper use of plugin one needs to have a copy of jQuery, jquery on Google, and the plugin. Place the files on your site and link to them. People need not to choose the particular effect as the plugin will automatically pick any of them

randomly. Its not a obvious feature of the jQuery as people can also select the
desired transition effects for individual images, or set an option of an array of effects to cycle by the given options. If any selection get done through array of options, then plugin will apply each effect in the order you specification. Example: If people have 10 images and array has three effects, the first image will get the first effect, the second image will get the second effect, the third image will get the third effect, and the fourth image will then get the first transition effect, and so on. Download Link: the latest version of the Panel Gallery is available here.

First, all of your images should be the same size and wrapped in a containing element (I recommend a div) which must have an ID. Any images will work, however transparent images arent recommended. Finally, your container element should be positioned (e.g. relative,

absolute, etc.). The container needs to be positioned otherwise the images within it wont end
up in the right spot on your page. Download

Download version 1.1 here Download jquery.panelgallery.js (version 1.0)