1. Galleria 2. Responsive Image Gallery 3. Supersized 4. S3 Slider 5. jQuery Panel Gallery

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 :

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 Twitter’s “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-Tan’s Flickr Photostream. The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.

Sample : THE MARKUP : Previous Next... Go to Link for more info: For demo: Download Link:

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.

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: Download Link: Options :

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.

HTML: Your text comes here Your text comes here

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). ? $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 4000 }); Take a look at the live example.live example Download: original.googlecode.com/svn/trunk/s3SliderPacked.jshttp://s3slider- original.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. It’s 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. 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 aren’t recommended. Finally, your container element should be positioned (e.g. relative, absolute, etc.). The container needs to be positioned otherwise the images within it won’t end up in the right spot on your page. Download Download version 1.1 here Download jquery.panelgallery.jsDownload jquery.panelgallery.js (version 1.0)