Embedding an Slideshow (Image-rotator) into Moodle’s Front Page September 15, 2011Posted by Tournas Dimitrios in Moodle.
JW-Player is also used by WordPress’s plugin “nextGen”
The process is as follows :
- First download “JWPlayer” from it’s home 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 :
</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>
- Save your changes .
- Demonstration on this site , also download the package from my blog .