CJ Simple Slideshow

Example

You can select a date and the table data will change based on your selection (Valid dates are May, June July, August, September and October of 2011). Use the theme switcher to see various styles based on jQuery UI theme builder.

Example 1

CSS

/* style the first slideshow in the css */
#SlideShow { position: relative; display: block; width: 250px; height: 125px; overflow: hidden; }

Html

<div id="SlideShow">
   <img src="sample1.jpg" width="250" height="125" /><br />
   <a href="/projects/cj-simple-slideshow/3.0.0/"><img src="sample2.jpg" width="250" height="125" alt="This is caption 2." /></a>
</div>

Code

// initialize the first slideshow container
$("#SlideShow").cjSimpleSlideShow();

Example 2

Start

CSS

/* styles for our second slideshow */
#SlideShow2 { position: relative; display: block; width: 720px; height: 450px; background: #eee; border: 1px solid #ccc; overflow: hidden; }
#SlideShow2 .cj_slideshow_pause { display: block; width: 100%; height: auto; margin-top: 25px; text-align: center; color: red; font-size: 11px; }
#SlideShow2 .cj_slideshow_caption { bottom: 25px; text-align: center; font-size: 12px; font-weight: bold; color: purple; }

Html

<div id="SlideShow2">
   <img src="sample1.jpg" width="350" height="175" alt="The image is centered in the box." /><br />
   <a href="/projects/cj-simple-slideshow/3.0.0/"><img src="sample2.jpg" width="350" height="175" alt="This is caption 2 and the image is still centered in the box." /></a>
</div>
<button id="slideshowButton"> Start Slide Show </button>

Code

// initialize the second slideshow container.
// It's ugly, but it uses all of the parameters avaialble.
$("#SlideShow2").cjSimpleSlideShow({
   autoRun: false,
   delay: 5500,
   dissolve: 40,
   showCaptions: true,
   centerImage: true,
   allowPause: true,
   pauseText: "<em>Paused Baby!</em>"
});

// manually start the slide show on button click
$("#slideshowButton").click( function() {
   $("#SlideShow2").cjSimpleSlideShow("start");
});

Example 3 (Class test)

This example show how to use the plugin on multiple elements with the same class name. It will initiate all the elements with the same call.

CSS

/* styles for our third slideshow */
.SlideShow3 { display: block; width: 350px; height: 175px; float: left; margin-right: 10px; overflow: hidden; }

Html

<div class="clearfix">
   <div class="SlideShow3">
      <img src="sample1.jpg" width="350" height="175" alt="The image is centered in the box." /><br />
      <img src="sample2.jpg" width="350" height="175" alt="This is caption 2 and the image is still centered in the box." />
   </div>
   <div class="SlideShow3">
      <img src="sample2.jpg" width="350" height="175" alt="This is caption 2 and the image is still centered in the box." /><br />
      <img src="sample1.jpg" width="350" height="175" alt="The image is centered in the box." />
   </div>
</div>

Code

/* class test (multiple elements initiated with the same call) */
$(".SlideShow3").cjSimpleSlideShow({
   delay: 500,
   dissolve: 500
});