More SlideshowPro fun

Judging by the popularity of my Gallery -> SlideshowPro script.
I was thinking there may be more than a few interested in a great way of displaying your gallery driven slideshows via SlideshowPro.

SlideshowPro's recent newsletter contained some very cool modal samples. Not being outdone I whipped one up based on jQuery's Thickbox.
The results are quite slick.
http://www.flashyourweb.com/media/index.php?g2_itemId=32 <- Launch SSP via the little green slideshow button.
Nicer then your average lytebox by far. Although I'm still partial to Cooliris ;)

Interested in the method, let me know.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

I also added the same modal view to my videos http://www.flashyourweb.com/media/index.php?g2_itemId=30
each indavidual video has its own as well as the slideshow pro view.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

• First you need to buy SlideshowPro.
• Then you'll need my Gallery2 -> SSP script.
• Then jQuery and Thickbox.

Lemme know when you have the above as they are required.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

upload slideshowpro.swf from the standalone sample directory to yoursite.com/gallery2
then you need to create a blank php page containing only slideshowpro contents:

<?php
$g2_itemId = isset($_REQUEST['g2_itemId'])? $_REQUEST['g2_itemId'] : 32; // 32 is my default g2_itemId


echo sprintf('
<script type="text/javascript" src="/gallery2/modules/flashvideo/lib/swfobject.js"></script>
<div style="width:100%%;" align="center">
	<div id="flashcontent" style="width:860px;height:580px;" align="center">
		This SlideShowPro photo gallery requires the Flash Player plugin and a web browser with JavaScript enabled.
	</div>		
</div>

<script type="text/javascript">
// <![CDATA[
	var so = new SWFObject("http://%s/gallery2/slideshowpro.swf", "ssp_demo", "100%%", "100%%", "9.0.115.0", "ffffff");
	so.addParam("flashVars","paramXMLPath=http://%s/gallery2/param.php?g2_itemId=%s");
	so.useExpressInstall("expressInstall.swf");
	so.addParam("allowScriptAccess","always");
	so.addParam("wmode","transparent");
	so.addParam("allowFullScreen","true");
	so.write("flashcontent");
// ]]>
</script>', $_SERVER["HTTP_HOST"], $_SERVER["HTTP_HOST"], $g2_itemId);
?>

save as thickSSP.php and upload to yoursite.com/gallery2
create another blank php page contents:

<?php
header('Content-Type: text/xml; charset=UTF-8');
echo sprintf('
<?xml version="1.0" encoding="UTF-8"?>
<params>
<customParams 
	sspWidth="860"
	sspHeight="580"
	sspSWFPath="http://%s/gallery2/slideshowpro.swf"	
/>
<nativeParams
	albumBackgroundAlpha="100"
	albumBackgroundColor="0x303030"
	albumDescColor="0xCCCCCC"
	albumDescSize="9"
	albumPadding="8"
	albumPreviewScale="Proportional"
	albumPreviewSize="54,40"
	albumPreviewStrokeColor="0xFFFFFF"
	albumPreviewStrokeWeight="1"
	albumPreviewStyle="Inline Left"
	albumRolloverColor="0x262626"
	albumStrokeAppearance="Visible"
	albumStrokeColor="0x141414"
	albumTextAlignment="Left"
	albumTitleColor="0xFFFFFF"
	albumTitleSize="10"
	audioLoop="Off"
	audioPause="Off"
	audioVolume="75"
	autoFinishMode="Switch"
	cacheContent="None"
	captionAppearance="Overlay Mouse Over (If Available)"
	captionBackgroundAlpha="60"
	captionBackgroundColor="0x676767"
	captionHeaderAppearance="Image Count"
	captionPadding="5,5,5,5"
	captionPosition="Top"
	captionTextAlignment="Left"
	captionTextColor="0xEEEEEE"
	captionTextSize="9"
	contentAlign="Center"
	contentAreaBackgroundAlpha="100"
	contentAreaBackgroundColor="0xE4E4E4"
	contentAreaStrokeAppearance="Visible"
	contentAreaStrokeColor="0x676767"
	contentFormat="Normal"
	contentFrameAlpha="0"
	contentFrameColor="0x262626"
	contentFramePadding="0"
	contentFrameStrokeAppearance="Hidden"
	contentFrameStrokeColor="0x333333" 
	contentOrder="Sequential"
	contentScale="Downscale Only"
	directorLargeImageSettings="80,1,100"
	directorThumbImageSettings="50,1"
	displayMode="Auto"
	feedbackBackgroundAlpha="80"
	feedbackBackgroundColor="0x676767"
	feedbackHighlightAlpha="30"
	feedbackHighlightColor="0xE4E4E4"
	feedbackPreloaderAlign="Center"
	feedbackPreloaderAppearance="Pie"
	feedbackPreloaderPosition="Inside Content Area"
	feedbackScale="100"
	feedbackTimerAlign="Top Right"
	feedbackTimerAppearance="Visible"
	feedbackTimerPosition="Inside Content Area"
	galleryAppearance="Closed at Startup"
	galleryBackgroundAlpha="100"
	galleryBackgroundColor="0x1c1c1c"
	galleryColumns="2"
	galleryOrder="Left to Right"
	galleryPadding="10"
	galleryRows="4"
	galleryNavActiveColor="0x303030"
	galleryNavAppearance="Hidden"
	galleryNavInactiveColor="0x000000"
	galleryNavRolloverColor="0x262626"
	galleryNavStrokeAppearance="Visible"
	galleryNavStrokeColor="0x141414"
	galleryNavTextColor="0xCCCCCC"
	galleryNavTextSize="9"
	iconInactiveAlpha="10"
	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="Always Visible"
	navBackgroundAlpha="100"
	navBackgroundColor="0xFFFFFF"
	navButtonsAppearance="Hide Gallery Control"
	navGradientAlpha="30"
	navGradientAppearance="Smooth Light"
	navIconColor="0x676767"
	navLinkAppearance="Thumbnails"
	navLinkCurrentColor="0xEEEEEE"
	navLinkPreviewAppearance="Visible"
	navLinkPreviewBackgroundAlpha="100"
	navLinkPreviewBackgroundColor="0xFFFFFF"
	navLinkPreviewScale="Proportional"
	navLinkPreviewSize="240,200"
	navLinkPreviewStrokeWeight="1"
	navLinkRolloverColor="0x505E65"
	navLinkSpacing="10"
	navLinksBackgroundAlpha="100"
	navLinksBackgroundColor="0xCCCCCC"
	navNumberLinkColor="0x999999"
	navNumberLinkSize="9"
	navPosition="Bottom"
	navThumbLinkBackgroundColor="0xCCCCCC"
	navThumbLinkInactiveAlpha="100"
	navThumbLinkShadowAlpha="60"
	navThumbLinkSize="30,30"
	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="Off"
	videoBufferTime="0.1"
	xmlFilePath="http://%s/gallery2/ssp.php?g2_itemId=%s&amp;g2_maxImageWidth=1040&amp;g2_maxImageHeight=1040"
	xmlFileType="Default" />
</params>', $_SERVER["HTTP_HOST"], $_SERVER["HTTP_HOST"], $_REQUEST['g2_itemId']);
?>

save as param.php and upload to yoursite.com/gallery2

you'll also need to configure ssp.php you got from mysite and upload to yoursite.com/gallery2

if your gallery is not in the default location(yoursite.com/gallery2) you'll need to edit these scripts to reflect your setup.

get thickSSP.php working, and we'll move on to altering your theme.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

ok,
we need to reference jquery and thickbox in theme.tpl
so in gallery2/themes/carbon/templates/local/theme.tpl <- you may have to copy the original here
add these lines:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="/gallery2/thickbox/thickbox-compressed.js" type="text/javascript"></script>
<style type="text/css" media="all">@import "/gallery2/thickbox/thickbox.css";</style>

notice that you'll need to copy your thickbox to gallery2/thickbox
done with theme.tpl, lets move on to album and photo.tpl
again you should copy the originals to gallery2/themes/carbon/templates/local/ and work on them instead of the originals
in each, there should be a loop for item links:

{foreach from=$links item=itemLink}
.
.
.
{/foreach}

there should already be a reference to the slideshow module {if $itemLink.moduleId == "slideshow"}
for photo.tpl:

		  <td class="gsActionIcon">
		    <a title="SlideshowPro" class="thickbox" href="/gallery2/thickSSP.php?height=590&amp;width=870&amp;g2_itemId={$theme.parent.id}">View SlideshowPro</a>
		  </td>

and album.tpl:

		  <td class="gsActionIcon">
		    {if $theme.item.entityType != 'GalleryDynamicAlbum'}<a title="SlideshowPro" class="thickbox" href="/gallery2/thickSSP.php?height=590&amp;width=870&amp;g2_itemId={$theme.item.id}">View SlideshowPro</a>{/if}
		  </td>

clear your template cache a try it out

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

So is the link in the album incorrect?
adjust them as needed.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

Hidden albums alter permissions.
I'm not sure if this will help, but try changing function getDisabledFlag in ssp.php to always return false:

function getDisabledFlag($itemId) {
    return false;
}

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

This is great ))

This is just what I needed to get SSP working in Gallery2. I installed specially a Gallery 2.3 in the root of my domain to get things going quickly.

I only had to search where the jquery.js had to go. Installed it in the thickbox subfolder and added a script reference in the theme.tpl for this.

Remaining task now for me is now to find which files (and which lines) to change for having Gallery2 with SSP in my_domain.com/this_subdomain/

Some questions:

- Would there be a method to avoid editing the files each time I create a new subdomain installation?

- Is it also possible to use, besides the standalone SSP, the SSP for flash also?

Thanks!

Have now installed a gallery2 in a specific subdomain and changed wherever I could find the reference /gallery2 into /my_subdomain/gallery2

This change was applied in
- thickSSP.php
- ssp.php
- param.php
- album.tpl of carbon theme
- photo.tpl of carbon theme
- theme.tpl of carbon theme

Slideshowpro executes about as expected except

1. When ViewSlideshoPro is clicked, I get for a short time an icon (white with red cross) indicating that an image is not avalaible. I guess this is the time it takes to load thickbox/ssp. Is there a way to speed up the loading?

2. In attached file you will see that the miniature is scaled with visible pixels. What is to be done to avoid this?

Thank you very much for all your help!

I went back and changed like you advised. It works

Really thank you for the same day replies. This makes me jumping forward

I am now at the last step... looking into how/where to change the G2/carbon sidebar for having slideshowpro instead of piclens.

So far, I have no idea were this functions resides and what to do

Ok, I will look into it together with the Drupal embedding of G2.

Either link ssp from the sidebar, delete the slideshow option from the sidebar or in worst case hide the sidebar through css.

Again many thanks for all your help

Mine is still setup w/ Thickbox, and I have not seen any compatibility issues w/ jQuery 1.4 but this is just the modal window slideshow pro is the real focus for you.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

i have made some tests with opml. let say i have a G2 structure like this, where id1 is the root album of a user

album_id1---album_id2---files
            album_id3---album_id4---files
                     ---files
            album_id5---album_id6---files
                     ---album_id7---files
            ---files

I have set:
xmlFilePath= $site /gallery2/opml.php?g2_itemId=1, slideshowPro only show me the albums id 2 & 3 (only the first sub-albums that contain files)

can i make it show me all the albums that contain files ?
i have tried $site /gallery2/opml.php?g2_itemId=1&g2_itemId=5 or $site /gallery2/opml.php?g2_itemId=1?g2_itemId=5 or $site /gallery2/opml.php?g2_itemId=1&recursive=true ... but nothing seems to work