Slideshow jQuery Tutorials

Follow a short brief about Canvas Slideshow option and usage.

Basic Option:
img_width => Width of image inside the slideshow (pixel)
img_height => Height of image inside the slideshow (pixel)
border_size => Border of the bounding box around image (pixel)
shadow_size => size of the shadow of the border and of text (pixel)
num_elem => number of element to show in a frame (integer)
show_description => show or not the description of the image (boolean)
show_box => show or not the bounding box of the image (boolean)
show_controls => show or not the controls on bottom of the image slideshow (boolean)
lightbox => use or not a lightbox, need external js (boolean)
speed => number of frame between a slideshow step and the next (integer)
step => speed of a single step (milli second)
loader_text => text to show while loading (string)
shadow_color => color of the shadow (string of rgb ex : ‘#cccccc’)
box_color => color of the bounding box (string of rgb ex : ‘#cccccc’)
text_color => color of the description text (string of rgb ex : ‘#cccccc’)
font => font family to use for the description text (string ex : ‘Times new roman’)
text_align => alignment for description text
util_img => array of image to use for the controls (array, default : new Array(‘images/prev.png’,'images/next.png’,'images/play.png’,'images/pause.png’))

Having a simple html like the following (Note that the list of images must be inside the canvas tag):

<canvas id="slideshow" width="800" height="250">
      <img src="images/image1.jpg" alt="description image 1" style="display:none;" />
      <img src="images/image2.jpg" alt="description image 2" style="display:none;" />
      <img src="images/image3.jpg" alt="description image 3" style="display:none;" />
      <img src="images/image4.jpg" alt="description image 4" style="display:none;" />
      <img src="images/image5.jpg" alt="description image 5" style="display:none;" />
      <img src="images/image6.jpg" alt="description image 6" style="display:none;" />
      <img src="images/image7.jpg" alt="description image 7" style="display:none;" />
      <img src="images/image8.jpg" alt="description image 8" style="display:none;" />
    </canvas>

You can initiate the slideshow calling :

    <script type="text/javascript">
      $(document).ready(function () {
        $('#slideshow').canvasSlideshow();
      });
    </script>

This will use default option, if you want to pass any option you need to use an option hash:

    <script type="text/javascript">
      $(document).ready(function () {
        $('#slideshow').canvasSlideshow({show_description : false, show_controls :false });
      });
    </script>

To use lightbox i suggest to include jquery lightbox, i commonly use balupton, you can find it here : JQuery Lightbox

You can donwload the plugin at Download Canvas Slideshow.
And see a demo just under this!