Search

Simple JQuery Slideshow

This is a simple JQuery slideshow with linked images by Jon Raasch


1. Copy the code below and paste it into a Rich Text / HTML paragraph.

2. Replace the images with your own that point to your "/project/images" folder in the DMS.

3. Replace the links with links of your own.

4. You may want to change the width and height in the CSS to the dimensions of your slides.

	

<p>
<style type="text/css"> 
/*** set the width and height to match your images **/  
</style>
</p>

<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default  (otherwise this will be the last image) -->
<div id="slideshow">
  <div class="slide active"><a href="http://www.jboss.org"><img alt="Slideshow Image 1" src="http:www.jboss.org/dms/exampleproject/images/image1.jpg" /> </a></div>
  <div class="slide"><a href="http://www.jboss.org"><img alt="Slideshow Image 2" src="http:www.jboss.org/dms/exampleproject/images/image2.jpg" /> </a></div>
  <div class="slide"><a href="http://www.jboss.org"><img alt="Slideshow Image 3" src="http:www.jboss.org/dms/exampleproject/images/image3.jpg" /> </a></div>
  <div class="slide"><a href="http://www.jboss.org"><img alt="Slideshow Image 4" src="http:www.jboss.org/dms/exampleproject/images/image4.jpg" /> </a></div>
  <div class="slide"><a href="http://www.jboss.org"><img alt="Slideshow Image 5" src="http:www.jboss.org/dms/exampleproject/images/image5.jpg" /> </a></div>
</div>

 


5. Place the following javascript into a Javascript paragraph in the header of your page by clicking "Page Info" at the top right of the browser. You can inherit this .js to child pages with the "Properties" tab if you're planning on having slideshows in other parts of your site.

	

<script type="text/javascript">

/***
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/

function slideSwitch() {
    var $active = $('#slideshow div.active');

    if ( $active.length == 0 ) $active = $('#slideshow div:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');

    // uncomment the 3 lines below to pull the images in random order
   
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>