SlideShowPro
From pixyWiki
SlideShowPro is an Adobe Flash slideshow application which integrates very well with your pixyBlog. This guide outlines the steps involved to get SlideShowPro working with your photoblog; for both your photoblog entries and your galleries.
Contents |
Prerequisites
- Pro or Premium account to be able to edit page templates.
Getting Started
First up you'll need to get the SlideShowPro for Flash product from the SlideShowPro website. SlideShowPro is a commercial product, so you'll need to purchase a license from them*. If you just want to try SlideShowPro then you can download the trial version which only shows 3 photos and 1 gallery, but the integration steps are the same.
Download SlideShowPro for Flash and extract the files to your computer. In the "Standalone/Deploy" folder you should find a file named "param.xml", you will need to open this with a text editor and change the following values:
<customParams sspWidth="542" sspHeight="441" />
And:
<nativeParams ... ...permalinks="On"... ...xmlFilePath="/page/images.xml" xmlFileType="Default" />
Save the file, then login to your pixyBlog account and go to "Blog > File Uploads". You can now upload the param.xml file you edited and the following files (all from the same folder):
- param.xml
- slideshowpro.swf
- loader.swf
- swfobjects.js
Adding the Javascript and CSS Styles
Add the following between the <head></head> tags in your _header page template. These are the required CSS and javascript functions you need to run SlideShowPro.
#if($model.weblogPage.name == "Slideshow")
<script language="VBScript">
<!--
Sub swfname_FSCommand(ByVal command, ByVal args)
select case command
case "putHREF" location.href = args
case "putTitle" document.title = args
end select
end sub
-->
</script>
<script type="text/javascript">
<!--
function flashPutHref(href) { location.href = href; }
function flashPutTitle(title) { document.title = title; }
-->
</script>
<script type="text/javascript" src="/resource/swfobject.js"></script>
<style type="text/css">
body,html {
margin: 0;
padding: 0;
height:100%;
width:100%;
overflow:hidden;
}
#flashcontent {
width:100%;
height:100%;
}
</style>
#end
NOTE: the above #if(... #end code is there to stop the above styles being displayed on ALL your pages. This would happen as the _header page template is included inside in all pages.
Creating the Slideshow page template
Create a new page template called Slideshow and add the following content:
#includeTemplate($model.weblog "header")
<div id="Content" align="center">
<!-- If moving, start copying from this line down -->
<div id="flashcontent">
This SlideShowPro photo gallery requires the Flash Player plugin and a web browser with JavaScript enabled.
</div>
<script type="text/javascript">
var so = new SWFObject("/resource/loader.swf", "loader", "542", "441", "8", "#121212");
so.addParam("allowFullScreen","true");
so.addParam("quality", "best");
so.addParam("base", ".");
so.addVariable("initialURL", escape(document.location));
so.addVariable("paramXMLPath","/resource/param.xml");
so.write("flashcontent");
</script>
<!-- Stop copying -->
</div>
#includeTemplate($model.weblog "footer")
NOTE: Each pixyBlog theme has a slightly different layout from one-another, the above example is from the Mangosteen theme. So depending on the theme you customized, you may need to edit the <div id="Content"> part to match the layout of your theme. To check the layout you have, take a look at the other page templates which make up your theme, e.g. About or Thumbnails.
Creating the images.xml file
Finally we need to create the XML file listing all the photos and galleries to show in the slideshow. The example below has one gallery with all the photos from your site, and then individual galleries matching those on you pixyBlog.
Create a new page template named images.xml, and copy in the following content and save the page.
<?xml version="1.0" encoding="UTF-8"?>
<gallery>
#set($pager = $model.getWeblogImagesPager("nil" , 100))
#set($images = $pager.getImages())
#foreach($image in $images)
#if($velocityCount == 1)
<album lgPath="/photo/" tnPath="/photo/gen/200/" title="All Photos" description="All Photos from $model.weblog.domain" tn="/photo/gen/200/$image.path">
#end
#showImageTag($image)
#end
</album>
#set($pager = $model.getWeblogGalleriesPager("nil", 100))
#set($galleries = $pager.getGalleries())
#foreach($gal in $galleries)
#showAlbumTag($gal)
#end
</gallery>
## macro to display image tag
#macro(showImageTag $image)
<img src="$image.fileName" title="$image.entry.title" caption="$utils.escapeXML($image.entry.transformedText)" link="$image.entry.permalink" target="_self" pause="" />
#end
## macro to display galleries and subgalleries
#macro(showAlbumTag $gal)
<album id="$gal.id" lgPath="/photo/" tnPath="/photo/gen/200/" title="$gal.name" description="$gal.description" tn="/photo/gen/200/$gal.image.path">
#set($images = $gal.getImages())
#foreach($image in $images)
#showImageTag($image)
#end
</album>
## check for sub-galleries
#set($subgals = $gal.weblogGalleries)
#foreach($subgal in $subgals)
#showAlbumTag($subgal)
#end
#end
The above code loops through all your galleries and sub-galleries and creates an XML document in the format required by SlideShowPro.
Your Slideshow should now ready, try it out!
Linking to Slideshow Galleries
The above set-up actives permalinks in SlideShowPro so that you can directly link to a specific gallery, and even a specific image within that gallery. Here's how:
<a href="$url.page('Slideshow')#id=$gal.id&num=1" title="Slideshow for gallery '$gal.name'">Show Slideshow</a>