Embedding an Slideshow (Image-rotator) into Moodle’s Front Page

My previous article demonstrated how to embed an static image on the front page of Moodle , let’s go one step further and embed and image-rotator on the front page . This functionality is based on JW-Player  (built with Adobe’s 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 WordPress’s plugin  “nextGen”

The process is as follows :

First download  “JWPlayer” from it’shome 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 . It’s also possible to add an description and an hyperlink to each image . Don’t forget to include in the folder the images that are listed in the xml-file  .

Transfer the “imagerotator” folder with FTP to your Moodle’s 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 Moodle’s  home page :

Login your Moodle’s administration panel  with your super-admin password . Login as administrator and click on “Turn Editing on” button . On top of the Content-

Block 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” isn’t 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 :

1234567

</pre><div id="container2">0pt auto;"></div><pre><pre><pre><embed id="rotator" width="650" height="200" flashvars="file=imagerotator/images.xml&width=650&height=200&rotatetime=5" allowfullscreen="false"  quality="high" name="rotator" style="undefined" src="imagerotator/imagerotator.swf" type="application/x-shockwave-flash"></div>

http://tournasdimitrios1.wordpress.com/2011/09/15/embedding-an-slideshow-image-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-slideshow-image-rotator-into-moodles-front-page/