Magento Image Slideshow

By Michael Kramer on October 3rd 2014 @ 9:26 am

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.

comments powered by Disqus

Similar

Become an Author