jump to navigation

Embedding an Slideshow (Image-rotator) into Moodle’s Front Page September 15, 2011

Posted by Tournas Dimitrios in Moodle.

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’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 :
    <div id="container2">0pt auto;"></div>
    <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">
  • 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 .


1. Woody - April 27, 2013

Woah! I’m really loving the template/theme of this blog. It’s simple,
yet effective. A lot of times it’s tough to get that “perfect balance” between superb usability and appearance. I must say you’ve done a great
job with this. In addition, the blog loads super quick for
me on Internet explorer. Excellent Blog!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s