General Support: Slide show fade transition mod

New user here... very pleased with Plogger!! Thanks!

I was searching here for a way to add transitions in a slideshow and found a solution by the same developer who wrote the slideshow.js script (in the main Plogger folder... the guy's site, and the fade-in example code I modified are here: http://www.barelyfitz.com/projects/slideshow/index.php/3). To incorporate a transition you have to add 2 code snippets into the slideshow.php file in the theme folder for the theme you're using (or modify slideshow.php in each theme folder to apply the transitions to all themes). I modified the slideshow.php file in the default theme folder with a couple of simple insertions into the code. (The slideshow.php code in the other theme folders looks identical, so this should work in the 3 themes that come with the Plogger download). This works for both Firefox and IE. Slideshow.js is unchanged!

Lines 17 & 18 of the unmodified slideshow.php read:

"_self","","","'.basename($pic['path']).'");
slides.add_slide(s);';

This mod requires an additional line between the two. Starting at line 17, the following 3 lines should read:

"_self","","","'.basename($pic['path']).'");
s.filter = "progid:DXImageTransform.Microsoft.Fade()";
slides.add_slide(s);';

Around line 56, the javascript for the htm page is written. The section begins with this comment:

// activate slideshow object using javascript block

The original code has 12 lines of javascript (appended to the $output variable). The original lines are:

$output .= '<SCRIPT TYPE="text/javascript">
<!--
if (document.images)
{
slides.set_image(document.images.slideshow_image);
slides.textid = "picture_caption"; // optional
slides.imagenameid = "image_name"; // optional
slides.update();
slides.play();
}
//-->
</SCRIPT>';

Replace those with the following:

$output .= '<SCRIPT TYPE="text/javascript">
<!--
if (document.images)
{
slides.set_image(document.images.slideshow_image);
slides.textid = "picture_caption"; // optional
slides.imagenameid = "image_name"; // optional
slides.update();

var fadein_opacity = 0.04;
var fadein_img = document.images.slideshow_image;
function fadein(opacity) {
if (typeof opacity != "undefined") { fadein_opacity = opacity; }
if (fadein_opacity < 0.99 && fadein_img && fadein_img.style &&
typeof fadein_img.style.MozOpacity != "undefined") {

fadein_opacity += .05;
fadein_img.style.MozOpacity = fadein_opacity;
setTimeout("fadein()", 50);
}
}
slides.play();
slides.post_update_hook = function() { fadein(0.04); }
}
//-->
</SCRIPT>';

That's it! Should work, if I haven't missed anything. For the record, I'm not a developer, I just a dabble with minor hacks, so please don't ask me to customize your code! I was hoping to find a mod/hack here to add in a fade transition and just managed to figure it out on my own. Hopefully others will find this useful.

I suspect you can incorporate other DXImage effects than DXImageTransform.Microsoft.Fade(), but the coding to insert multiple different transitions is beyond me (and my needs). Check here if yer feeling adventurous: http://msdn2.microsoft.com/en-us/library/ms532847.aspx.

Cheers... Gary
http://www.demenshea.com/garyreesphotography/gallery/