Best 5 jQuery Script for Gallery

1
Best 5 jQuery Script for Gallery gt
1. Galleria
2. Responsive Image Gallery
3. Supersized
4. S3 Slider
5. jQuery Panel Gallery
2
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.

3
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
4

• 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

5
2. Responsive Image Gallery
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.
6
Sample THE MARKUP   ltdiv id"rg-gallery"
class"rg-gallery"gt     ltdiv class"rg-thumbs"gt   
      lt!-- Elastislide Carousel Thumbnail Viewer
--gt         ltdiv class"es-carousel-wrapper"gt     
        ltdiv class"es-nav"gt                 ltspan
class"es-nav-prev"gtPreviouslt/spangt              
   ltspan class"es-nav-next"gtNextlt/spangt          
   lt/divgt             ltdiv class"es-carousel"gt   
              ltulgt                     ltligt       
                  lta href""gt                    
         ltimg src"images/thumbs/1.jpg"
data-large"images/1.jpg" alt"image01"
data-description"Some description"
/gt                         lt/agt                   
  lt/ligt                     ltligt...lt/ligt          
       lt/ulgt             lt/divgt         lt/divgt    
     lt!-- End Elastislide Carousel Thumbnail
Viewer --gt     lt/divgtlt!-- rg-thumbs
--gt lt/divgtlt!-- rg-gallery --gt
Go to Link for more info http//tympanus.net/codr
ops/2011/09/20/responsive-image-gallery/ For
demo http//tympanus.net/Tutorials/ResponsiveImag
eGallery/ Download Link http//tympanus.net/Tutor
ials/ResponsiveImageGallery/ResponsiveImageGallery
.zip?84cd58
7
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.
Continue.
8
Options
Autoplay Fit_always Fit_landscape Fit_portrait Hor
izontal_center Image_protect Keyboard_nav Min_heig
ht Min_width New_window Pause_hover Performance Ra
ndom Slides Slideshow Slide_interval Slide_links S
tart_slide Stop_loop Thumb_links Thumbnail_navigat
ion Transition Transition_speed Vertical_center
See Demo http//www.buildinternet.com/project/sup
ersized/default.php Download Link
http//www.buildinternet.com/project/supersized/su
persized2.zip
9
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
jQuerys homepage. lt script src"js/jquery.js"
type"text/javascript"gtlt /scriptgt lt script
src"js/s3Slider.js" type"text/javascript"gtlt
/scriptgt
10
HTML   ltdiv id"s3slider"gt     ltul
id"s3sliderContent"gt         ltli
class"s3sliderImage"gt             ltimg
src""gt             ltspangtYour text comes
herelt/spangt         lt/ligt         ltli
class"s3sliderImage"gt             ltimg
src""gt             ltspangtYour text comes
herelt/spangt         lt/ligt         ltdiv
class"clear s3sliderImage"gtlt/divgt     lt/ulgt lt/div
gt
11
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 /
Continue
12
.s3sliderImage span     position absolute /
important /     left 0     font 10px/15px
Arial, Helvetica, sans-serif     padding 10px
13px     width 374px     background-color
000     filter alpha(opacity70) / 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  -gt the box with
text will be shown                               
  at the top of the image         if you put
bottom 0  -gt the box with text will be shown
                                at the bottom of
the image     /   .clear     clear both  
Continue
13
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//s3slider-original.googlecode.com/svn/trunk/
s3SliderPacked.js
14
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.
Continue ...
15
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)
Finish