Monoslideshow flash galleries

Here is how you can setup Monoslideshow Flash Galleries in Textpattern, with the aid of smd_gallery, adi_gps and mg_setheader.

In order to work, this flash gallery needs to load an xml file with slideshow preferences and list of images. Monoslideshow is not free, but many other free flash gallery libs need xml files, for example Autoviewer.

Generate the xml file with Textpattern

  1. Install and activate the 3 plugins above, copy the monoslideshow.swf into the /images directory.
  2. Create a section and a page named “xml”.
  3. In a form named monoslideshow_pref, paste the code below :
<preferences
		showLoadingIcon = "false"
		showAlbumsButton = "false"
		showThumbnailsButton = "false"
		showImageInfo = "never"
		kenBurnsMode = "random"
		controlAutoHide = "true"
		markFile = ""
/>

The preferences stuff is generated on the monoslideshow demo site.

In the page “xml” paste the code below :

<txp:mg_setheader /><?xml version="1.0" encoding="utf-8"?>
<slideshow>
<txp:output_form form="monoslideshow_pref"/>
<album title="Diaporama" description="Diaporama" imagePath="/images">
<txp:smd_gallery category='<txp:adi_gps name="c" />'>
    <img src="{id}{ext}" title="{alt}" description="{title}" />
</txp:smd_gallery>
</album>
</slideshow>
<txp:article pgonly="1" />

In this page:

  • the xml is generated with the correct header (mg_setheader)
  • the smd_gallery plugin list all the images from a particular category …
  • the category come from a GET variable extracted from the URL with the adi_gps plugin.

We call this section like this to show the xml file : www.mysite.com/xml?c=demo (list all the images from the demo category).

Install the SWFObject.js

Install the SWFObject.js, and call the script from the head part of the page, like this :

<script type="text/javascript" src="/js/swfobject.js"></script>

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.

Create a form named “monoslideshow”, and paste the code :

<div id="monoSlideshow">
<p><strong>To see diaporamas, install Flash&reg; and activate Javascript ...</strong></p>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/images/monoslideshow.swf", "SOmonoSlideshow", "600", "200", "7", "#ffffff");
so.addVariable("dataFile", "/xml?c=<txp:custom_field name="Diaporama" />");
so.write("monoSlideshow");
// ]]>
</script>

In this code, the SWFObject show the monoslideshow.swf, load the xml file and pass as category (xml?c=…) the value of a Custom field named “Diaporama”.

To show a slideshow below the body of an article, paste the code :

<txp:article limit='1'>
<h2><txp:title /></h2>
<txp:body />
<txp:if_custom_field name="Diaporama">
<txp:output_form form="monoslideshow" />
</txp:if_custom_field>
</txp:article>

Here, when you put in the custom_field “Diaporama” the name of an image category, a slideshow is displayed at the end of an article.

Many thanks to Stef Dawson for plugins and his help on the forums!

comments powered by Disqus