SlideShowPro with ExpressionEngine Gallery

ee+slideshowproThere is an excellent flash photo gallery, that is xml driven flash photo gallery which is very flexible, looking awesome; SlideshowPro
I’ve implemented slideshowpro to expressionengine gallery in a project. I think, you are looking for this too ;) . Here are the step by step instructions.

1. Create your EE photo gallery. If you need to show multiple albums, create multiple ctaegory on your gallery.
2. To show multiple albums, you might need album cover photo which EE gallery doesn’t has this feature. We can do that in an alternative way. We’ll create a custom field,
so go to gallery preferences > Custom Entry Field Preferences. Enable custom field one, named it as “Album Photo”, define the field type as dropdown menu, put the value No,Yes. Put “No” first to make this as default value.

scr2
3. Now add photos, remember select Album Photo=Yes as one photo for each category as Album Photo.
4. Now it’s time to prepare the xml files for slideshow pro. Create an xml type template named param.xml, your slideshowpro version already has samle param.xml. Here is the content again

<?xml version="1.0" encoding="UTF-8"?>
<params>
<customParams sspWidth="925" sspHeight="684" sspSWFPath="{site_url}images/gallery/slideshowpro.swf"/>
<nativeParams
	albumBackgroundAlpha="100"
	albumBackgroundColor="0x303030"
	albumDescColor="0xCCCCCC"
	albumDescSize="9"
	albumPadding="8"
	albumPreviewScale="Crop to Fit"
	albumPreviewSize="379,85"
	albumPreviewStrokeColor="0xFFFFFF"
	albumPreviewStrokeWeight="1"
	albumPreviewStyle="Banner"
	albumRolloverColor="0x262626"
	albumStrokeAppearance="Visible"
	albumStrokeColor="0x141414"
	albumTextAlignment="Left"
	albumTitleColor="0xFFFFFF"
	albumTitleSize="18"
	audioLoop="Off"
	audioPause="Off"
	audioVolume="75"
	autoFinishMode="Switch"
	cacheContent="None"
	captionAppearance="Overlay Mouse Over (If Available)"
	captionBackgroundAlpha="75"
	captionBackgroundColor="0x000000"
	captionHeaderAppearance="Image Count"
	captionPadding="5,5,5,5"
	captionPosition="Top"
	captionTextAlignment="Left"
	captionTextColor="0xEEEEEE"
	captionTextSize="9"
	contentAlign="Bottom Center"
	contentAreaBackgroundAlpha="100"
	contentAreaBackgroundColor="0xFFFFFF"
	contentAreaStrokeAppearance="Visible"
	contentAreaStrokeColor="0xCCCCCC"
	contentFormat="Normal"
	contentFrameAlpha="100"
	contentFrameColor="0xFFFFFF"
	contentFramePadding="0"
	contentFrameStrokeAppearance="Hidden"
	contentFrameStrokeColor="0xCCCCCC"
	contentOrder="Sequential"
	contentScale="Proportional"
	directorLargeImageSettings="80,1,100"
	directorThumbImageSettings="50,1"
	displayMode="Auto"
	feedbackBackgroundAlpha="40"
	feedbackBackgroundColor="0x000000"
	feedbackHighlightAlpha="80"
	feedbackHighlightColor="0xFFFFFF"
	feedbackPreloaderAlign="Center"
	feedbackPreloaderAppearance="Pie"
	feedbackPreloaderPosition="Inside Content Area"
	feedbackScale="100"
	feedbackTimerAlign="Top Right"
	feedbackTimerAppearance="Visible"
	feedbackTimerPosition="Inside Content Area"
	galleryAppearance="Open at Startup"
	galleryBackgroundAlpha="100"
	galleryBackgroundColor="0x1c1c1c"
	galleryColumns="2"
	galleryOrder="Left to Right"
	galleryPadding="10"
	galleryRows="4"
	galleryNavActiveColor="0x303030"
	galleryNavAppearance="Visible"
	galleryNavInactiveColor="0x000000"
	galleryNavRolloverColor="0x262626"
	galleryNavStrokeAppearance="Visible"
	galleryNavStrokeColor="0x141414"
	galleryNavTextColor="0xCCCCCC"
	galleryNavTextSize="9"
	iconInactiveAlpha="40"
	iconShadowAlpha="60"
	keyboardControl="On"
	mediaPlayerAppearance="Visible"
	mediaPlayerBackgroundAlpha="25"
	mediaPlayerBackgroundColor="0x000000"
	mediaPlayerBufferColor="0x000000"
	mediaPlayerControlColor="0xFFFFFF"
	mediaPlayerElapsedBackgroundColor="0xFFFFFF"
	mediaPlayerElapsedTextColor="0x000000"
	mediaPlayerIconColor="0xCCCCCC"
	mediaPlayerPosition="Bottom"
	mediaPlayerProgressColor="0xCCCCCC"
	mediaPlayerScale="80"
	mediaPlayerTextColor="0xEEEEEE"
	mediaPlayerTextSize="9"
	mediaPlayerVolumeBackgroundColor="0x000000"
	mediaPlayerVolumeHighlightColor="0xCCCCCC"
	navAppearance="Hidden When Gallery Open"
	navBackgroundAlpha="100"
	navBackgroundColor="0x121212"
	navButtonsAppearance="Hide Full Screen Control"
	navGradientAlpha="30"
	navGradientAppearance="Glass Dark"
	navIconColor="0xEEEEEE"
	navLinkAppearance="Thumbnails"
	navLinkCurrentColor="0xEEEEEE"
	navLinkPreviewAppearance="Hidden"
	navLinkPreviewBackgroundAlpha="100"
	navLinkPreviewBackgroundColor="0xFFFFFF"
	navLinkPreviewScale="Proportional"
	navLinkPreviewSize="80,60"
	navLinkPreviewStrokeWeight="1"
	navLinkRolloverColor="0xFFFFFF"
	navLinkSpacing="10"
	navLinksBackgroundAlpha="100"
	navLinksBackgroundColor="0x121212"
	navNumberLinkColor="0x999999"
	navNumberLinkSize="9"
	navPosition="Bottom"
	navThumbLinkBackgroundColor="0x666666"
	navThumbLinkInactiveAlpha="100"
	navThumbLinkShadowAlpha="60"
	navThumbLinkSize="60,40"
	navThumbLinkStrokeWeight="1"
	permalinks="Off"
	smoothing="Off"
	soundEffects="None,None,None"
	textStrings="Previous Screen,Next Screen,Screen,of,No caption,No title"
	transitionDirection="Left to Right"
	transitionLength="2"
	transitionPause="4"
	transitionStyle="Cross Fade"
	typeface="Lucida Grande,Lucida Sans Unicode,Verdana,Arial,_sans"
	typefaceHead="Lucida Grande,Lucida Sans Unicode,Verdana,Arial,_sans"
	typefaceEmbed="Off"
	videoAutoStart="On"
	videoBufferTime="0.1"
	xmlFilePath="{site_url}galleries/flash-gallery.xml"
	xmlFileType="Default" />
</params>

5. See carefully two things here, one is sspSWFPath, another is xmlFilePath. Create a folder named “gallery” inside images folder, put all the slideshow files(expressInstall.swf, loader.swf, slideshowpro.swf) on
that folder. It’s not important to create the gallery folder inside image folder, you can create anywhere – but remember about url to put correctly in param.xml template. Then about xmlFilePath value, this is the gallery’s
photos images file. So create a xml type template under galleries template group(or anywhere you want), then put the following sample content in the flass-gallery.xml


<?xml version="1.0" encoding="UTF-8"?>
<gallery>
{exp:gallery:categories gallery="YOUR_PHOTO_GALLERY_NAME" orderby="category_id" sort="asc"}
{category_row}
{row}

<album title="{category}" description="{category_description}"
  {exp:gallery:entries gallery="past_productions" orderby="{entry_date}" sort="asc"  category="{category_id}" dynamic="off" show_expired="yes" show_future_entries="yes"}
       {entries}

         {if '{custom_field_one}'=='Yes'}
             lgpath="{site_url}images/YOUR_GALLERY_PHOTOS_FOLDER/{cat_folder}/" tnpath="{site_url}images/YOUR_GALLERY_PHOTOS_FOLDER/{cat_folder}/" tn="{site_url}images/YOUR_GALLERY_PHOTOS_FOLDER/{cat_folder}/{filename}{extension}"
         {/if}

      {/entries}
    {/exp:gallery:entries}

>

  {exp:gallery:entries gallery="YOUR_PHOTO_GALLERY_NAME" orderby="{entry_date}" sort="asc"  category="{category_id}" dynamic="off" show_expired="yes" show_future_entries="yes" limit="100"}
       {entries}
         {if '{custom_field_one}'!='Yes'}
           <img src="{filename}{extension}" />
         {/if}
      {/entries}
    {/exp:gallery:entries}

</album>

{/row}
{/category_row}

{/exp:gallery:categories}
</gallery>

6. On the above xml, you might see YOUR_PHOTO_GALLERY_NAME, YOUR_PHOTO_GALLERY_NAME . Put correct value. So we are almost done. Now it’s time to show the gallery now. Create your gallery template, put
tags as below


{assign_variable:my_template_group="gallery"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>SlideShowPro / ExpressionEngine Gallery</title>

<script type="text/javascript" src="{site_url}scripts/swfobject.js"></script>
<script type="text/javascript" src="{site_url}scripts/swffit.js"></script>

<script type="text/javascript">
// Permalinks option
function flashPutHref(href) { location.href = href; }

// SWFObject embed
var flashvars = {
	paramXMLPath: "{site_url}galleries/param.xml",
       initialURL: escape(document.location)
}

var params = {
	base: ".",
	quality: "best",
	bgcolor: "#FFFFFF",
	allowfullscreen: "true"
}                

var attributes = {}
swfobject.embedSWF("{site_url}images/gallery/loader.swf", "gallery", "590", "734", "9.0.0", "{site_url}images/gallery/expressInstall.swf", flashvars, params, attributes);
</script>

</head>

<body>
<div id="gallery"></div>
</body>
</html>

See carefully javascripts code here. You have to include two javascript files(swfobject.js, swffit.js) which comes with slideshowpro package to render the flash gallery properly.
Then put the file location properly. Remmeber, i’ve used absolute url all over the section, so its easy. Thanks to come/read this post. If you need any help, just ping me ;)

About these ads

16 thoughts on “SlideShowPro with ExpressionEngine Gallery

  1. I had never worked with EE’s gallery module before reading this tutorial. Basically, our resident EE expert alway makes the sign of the cross when talking about EE galleries. Had used SlideShow, however, so decided to give it a whack when I saw this.

    Very useful! Thank you.

  2. Great article.

    How difficult would be be to set it up so that a visitor could add comments to a photo? It would be nice if you click on the photo in SlideShowPro, and then redirect the visitor to a photo page where they could enter a comment.

    Ross

    • Hi Painted Pixel,
      Yes, it would be very easy to adding commenting stuff. SlideShowPro allows to put link each image, so we can allow user to click on a image – then can put the details image with commenting stuff on another template. Yes, we can implement Jquery gallery to show EE gallery image as well. If you need assitance – let me know.

      Thanks

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