Magento Image Slideshow

This is a guide on making a very simple, easy slideshow without having to include any additional javascript libraries in Magento.

This assumes you are familiar with the CMS editing features of Magento.

In this tutorial, I’m going to be adding a slideshow using the Content of the CMS Page, this would work just as well in a Static Block.

First step is to hide the WYSIWYG Editor, as we will be using the source directly.

<script type="text/javascript">

   var num_slides = 3;
   var slideDuration = 3000; //slide duration in ms

    start_slideshow(1, num_slides , slideDuration);

    function start_slideshow(start_frame, end_frame, delay) {
        setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
    }

    function switch_slides(frame, start_frame, end_frame, delay) {
        return (function() {
            Effect.Fade('slide' + frame);
            if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
            setTimeout("Effect.Appear('slide" + frame + "');", 850);
            setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
        })
    }

</script>

The Javascript is pretty self explanatory, what it does it takes the number of slides, it finds elements with the IDs slide+FRAME NUMBER (i.e, slide1, slide2, slide3, etc)

THE HTML

The html is pretty easy, this will fade in any element (and all children of that element) that has an ID slide and the slide number,

<div id="slide1" class="slide">
<img src="{{media url="wysiwyg/Your-Slide.jpeg"}}">
</div>

When view it on the page, you should see the slideshow.

Any questions, please let me know.