Archives

Thanks to a fellow colleague (Heath Dutton) I can now bring you a method to link up SlideShowPro to your Expression Engine Gallery.

Step 1. Go get SlideShowPro (what are you waiting for)

Step 2. Create a slideshow in flash (or use the stand alone) set your xml file to http://yoursite.com/gallery/slideshow.xml

Step 3. Crete a template group called gallery in EE  and create a template called slideshow.xml

Step 4. Add this to your template and save it:

{assign_variable:gallery_name="gallery"}
<?xml version="1.0" encoding="UTF-8"?>
<gallery>
<?php if (!isset($_GET['category_id'])) { ?>    
 {exp:gallery:categories gallery="{gallery_name}"}
 {category_row}
 {row}
 <album title="{category}" category_id="{category_id}">
 {embed="gallery/slideshow_embed" gallery_name="{gallery_name}" category_id_number="{category_id}"}
 </album>
 {/row}
 {/category_row}
 {/exp:gallery:categories}
 <?php } else {  ?>
 <album title="<?php if (isset($_GET['category'])) echo $_GET['category']; ?>" category_id="<?php echo $_GET['category_id']; ?>">
 {embed="gallery/slideshow_embed" gallery_name="{gallery_name}" category_id_number="<?php echo $_GET['category_id']; ?>"}
 </album>
 <?php } ?>
</gallery>

Step 5. Create the embed template call it slideshow_embed (paste this into that template)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript">
 // swf finder
 function thisMovie(movieName) {
 if (navigator.appName.indexOf("Microsoft") != -1) {
 return window[movieName]
 } else {
 return document[movieName]
 }
 }

 // SWFObject embed
 var flashvars = {
//  if you are using the standalone  paramXMLPath: "/include/param.xml",
 initialURL: escape(document.location),
 useExternalInterface: "true"
 }
 var params = {
 base: ".",
 wmode: "transparent",
 bgcolor: "#FFFFFF",
 allowfullscreen: "true"
 }                
 var attributes = {
 id: "ssp"
 }
 swfobject.embedSWF("/include/slideshowpro.swf", "flashcontent", "470", "340", "9.0.115.0", false, flashvars, params, attributes);
</script>
<div id="flashcontentcontainer">
 <div id="flashcontent">In order to experience the photo gallery fully, you will need the latest Flash player.</div>
</div>

Step 6. Create an include folder in your directory and drop your slideshow.swf file there (if using standalone drop the param.xml file there as well.

Step  7. Use this embed in your templates to display your slideshow.

Step 8. Profit

Get Expression Engine
(if you have any improvements or suggestions hit me up in the comments)