SlideShare a Scribd company logo
1 of 15
Download to read offline
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
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 :

<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                                 Random
Fit_always                               Slides
Fit_landscape                            Slideshow
Fit_portrait                             Slide_interval
Horizontal_center                        Slide_links
Image_protect                            Start_slide
Keyboard_nav                             Stop_loop
Min_height                               Thumb_links
Min_width                                Thumbnail_navigation
New_window                               Transition
Pause_hover                              Transition_speed
Performance                              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://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.
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.js (version 1.0)

More Related Content

Viewers also liked

Philip larkin for edulink
Philip larkin for edulinkPhilip larkin for edulink
Philip larkin for edulinkNtando Mnguni
 
Draft your next training course with ideas from Training from the Back of the...
Draft your next training course with ideas from Training from the Back of the...Draft your next training course with ideas from Training from the Back of the...
Draft your next training course with ideas from Training from the Back of the...Luca Minudel
 
Factory Design Pattern
Factory Design PatternFactory Design Pattern
Factory Design PatternJaswant Singh
 
New Lean-Agile Coach Self-Assessment - detailed descriptions v3
New Lean-Agile Coach Self-Assessment - detailed descriptions v3New Lean-Agile Coach Self-Assessment - detailed descriptions v3
New Lean-Agile Coach Self-Assessment - detailed descriptions v3Luca Minudel
 
From Continuous Integration to Continuous Delivery and DevOps
From Continuous Integration to Continuous Delivery and DevOpsFrom Continuous Integration to Continuous Delivery and DevOps
From Continuous Integration to Continuous Delivery and DevOpsLuca Minudel
 
Early renaissance poetry notes
Early renaissance poetry notesEarly renaissance poetry notes
Early renaissance poetry notesNtando Mnguni
 

Viewers also liked (6)

Philip larkin for edulink
Philip larkin for edulinkPhilip larkin for edulink
Philip larkin for edulink
 
Draft your next training course with ideas from Training from the Back of the...
Draft your next training course with ideas from Training from the Back of the...Draft your next training course with ideas from Training from the Back of the...
Draft your next training course with ideas from Training from the Back of the...
 
Factory Design Pattern
Factory Design PatternFactory Design Pattern
Factory Design Pattern
 
New Lean-Agile Coach Self-Assessment - detailed descriptions v3
New Lean-Agile Coach Self-Assessment - detailed descriptions v3New Lean-Agile Coach Self-Assessment - detailed descriptions v3
New Lean-Agile Coach Self-Assessment - detailed descriptions v3
 
From Continuous Integration to Continuous Delivery and DevOps
From Continuous Integration to Continuous Delivery and DevOpsFrom Continuous Integration to Continuous Delivery and DevOps
From Continuous Integration to Continuous Delivery and DevOps
 
Early renaissance poetry notes
Early renaissance poetry notesEarly renaissance poetry notes
Early renaissance poetry notes
 

Recently uploaded

PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 

Recently uploaded (20)

PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 

Best 5 jQuery Script for Gallery

  • 1. 1. Galleria 2. Responsive Image Gallery 3. Supersized 4. S3 Slider 5. jQuery Panel Gallery Best 5 jQuery Script for 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. 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.
  • 6. 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
  • 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.
  • 8. Options : Autoplay Random Fit_always Slides Fit_landscape Slideshow Fit_portrait Slide_interval Horizontal_center Slide_links Image_protect Start_slide Keyboard_nav Stop_loop Min_height Thumb_links Min_width Thumbnail_navigation New_window Transition Pause_hover Transition_speed Performance Vertical_center See Demo: http://www.buildinternet.com/project/supersized/default.php Download Link: http://www.buildinternet.com/project/supersized/supersized2.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 jQuery`s homepage. < script src="js/jquery.js" type="text/javascript">< /script> < script src="js/s3Slider.js" type="text/javascript">< /script>
  • 10. 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>
  • 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 */ }
  • 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(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; }
  • 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. 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.
  • 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 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.js (version 1.0)