Embedding an Slideshow (Image-rotator) into Moodles Front Page

My previous article demonstrated how to embed an static image on the front page of Moodle , lets go one step further and embed and image-rotator on the front page . This functionality is based on JW-Player (built with Adobes Flash) and displays photos in sequence with fluid transitions . It supports rotation of an playlists with JPG , GIF and PNG images , a wide range of FlashVars (variables) for tweaking both behavior and appearance and an extensive JavaScript API . JW-Player is also used by WordPresss plugin nextGen The process is as follows :

First download JWPlayer from itshome page . The download ZIP contains all you need to get started . Unzip the package and open the .xml file with a simple editor ( I use notepad++) . This xml-file defines the playlist of your image-rotator , you may add as many images into the list . Its also possible to add an description and an hyperlink to each image . Dont forget to include in the folder the images that are listed in the xml-file . Transfer the imagerotator folder with FTP to your Moodles root directory . The folder contains imagerotator.swf , images.xml file , swfobject.js and of course all photos you want to show onto your site . I also include an empty index.php file , this will protect this directory from directory-listing ( in case your host has this security functionality disabled ) .

Now we have to embed the swf file into Moodles home page :

Login your Moodles administration panel with your super-admin password . Login as administrator and click on Turn Editing on button . On top of the ContentBlock is an hand-icon , clicking this icon reveals the HTML-editor . This editor has two modes of operation (toggling between these two modes is done by clicking the <> icon . If the hand-icon isnt visible goto Site-Administration->Front-Page>Front-Page-Settings-> Enable- Include a topic section . Enable the code-editor mode with the <> icon . Paste the following code int the editor :
</pre> id="container2">0pt auto;"></div> 1<div <pre> 2<pre> 3<pre> 4<embed id="rotator" width="650" height="200" 5flashvars="file=imagerotator/images.xml&width=650&height=200&rotatet ime=5" allowfullscreen="false" quality="high" name="rotator" 6style="undefined" src="imagerotator/imagerotator.swf" 7type="application/x-shockwave-flash"> </div>

http://tournasdimitrios1.wordpress.com/2011/09/15/embedding-an-slideshowimage-rotator-into-moodles-front-page/

My example use the embed function to embed the swf-file into the HTML-code .Alternative solutions could use a Javascript object (swfobject.js) . Save your changes . Demonstration on this site , also download the package from my blog

http://tournasdimitrios1.wordpress.com/2011/09/15/embedding-an-slideshowimage-rotator-into-moodles-front-page/