Monoslideshow and EE Gallery--tutorial.jcwcn.com

In your gallery template group create a new RSS/XML template called mono_xml. To this template we are going to add our XML but we have to dynamically generate it from our EE gallery. you can download my template from here

To explain the XML

{assign_variable:gallery_url="http://www.somesite.com/images/photos/"}
{assign_variable:gallery_name="myphotos"}
{assign_variable:gallery_number="1"}
<?xml version="1.0" encoding="UTF-8"?>
<slideshow>
<preferences />

Change variables above to suit your own gallery. The preferences tag will be where we add our generated preferences from the Monoslideshow demo page.

{exp:query sql="SELECT cat_id,cat_folder FROM exp_gallery_categories WHERE gallery_id = '{gallery_number}'"}
{exp:gallery:entries gallery="{gallery_name}" category="{cat_id}" limit="500"}
<album thumbnail="{gallery_url}{cat_folder}/{category}_thumb.jpg" title="{category}" description="{category_description}" imagePath="{gallery_url}{cat_folder}/" thumbnailPath="{gallery_url}{cat_folder}/">

Do you see the parameter for thumbnail in the album tag above? This is how we get our album images. Pick a suitable category image that you wish to have for an album image and replace the actual image name with the name of the category group it resides in.

Album Thumbnails

{entries}
<img src="{filename}.jpg" title="{title}" description="{caption}"/>
{/entries}
</album>
{/exp:gallery:entries}
{/exp:query}
</slideshow>

Slideshow Preferences

Head over to the Monoslideshow demo page and make all your changes to the preferences refreshing the slide show there as you go. When you are happy with how it looks click on the download XML button. This will let you save an XML file to your computer. Open this file and do you remember I mentioned the preferences tag above. Copy and paste the generated preferences into your mono_xml template where I pointed out above. All you need are the preference

SWFObject

SWFObject if you haven't come across it before is a Javascript Flash Player detection and embed script.

SWFObject is a small Javascript file used for embedding Macromedia Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents, and is forward compatible, so it should work for years to come.*

Download SWFObject 1.5 For the purposes of this tutorial I won't be covering the detection variables but the site has a load of info on how to do this. We will only be using one file from the download (swfobject.js) Upload this JavaScript to wherever you keep your scripts on your server e.g. http://www.somesite.com/scripts/swfobject.js

The Slideshow Template

Open Up the template where you want the slideshow to appear. In the header of the template we are going to link to our SWFObject we just uploaded

<script type="text/javascript" src="http://www.somesite.com/scripts/swfobject.js"></script>

To use SWFObject we have to add a div to the template with an id of 'mssHolder'.
This is where our Slideshow will appear

<div id="mssHolder">
<p>Temporary holder for the Flash object</p>
</div>

We then add the javascript to display it. Change the paths and size to reflect yours

<script type="text/javascript">
var so = new SWFObject("http://www.yoursite.com/images/monoslideshow.swf", "mss", 480, 360, "7", "#ffffff");
so.addVariable("showLogo", "false");
so.addVariable("dataFile", "http://www.yoursite.com/index.php/gallery/mono_xml/");
so.write("mssHolder");
</script>

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]