Bug in Ken Burns Slideshow


Today, I noticed that there was a bug in the Ken Burns slideshow as detailed in a previous post. The bug is simply that there’s actually no random effect and indeed when looking at the page source, the javascript output is:

http://gist.github.com/3763308

However, the really quirky thing is that when you start debugging using Visual studio and put breakpoints, the effects are then random as shown by the javascript below:

{ src: '/umbraco/ImageGen.ashx?image=/media/2764/Ice sculptures-1-2.jpg&width=350',
                from: 'bottom right',to:   'top left 1.1x', time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2776/Ice sculptures-1-3.jpg&width=350',
                from: '50% 100% 1x',to: '50% 0% 5.7x',time: 6                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2788/Ice sculptures-1.jpg&width=350',
                from: 'top left',to: 'bottom right 1.5x',time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2800/Ice sculptures-10.jpg&width=350',
                from: '100% 50%',to:   '30% 50% 1.5x',time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2812/Ice sculptures-2-2.jpg&width=350',
                from: 'top left',to: 'bottom right 1.5x',time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2824/Ice sculptures-2.jpg&width=350',
                from: '50% 100% 1x',to: '50% 0% 5.7x',time: 6                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2836/Ice sculptures-3-2.jpg&width=350',
                from: '50% 100% 1x',to: '50% 0% 5.7x',time: 6                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2848/Ice sculptures-3.jpg&width=350',
                from: 'bottom right',to:   'top left 1.1x', time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2860/Ice sculptures-4-2.jpg&width=350',
                from: '50% 100% 1x',to: '50% 0% 5.7x',time: 6                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2872/Ice sculptures-4.jpg&width=350',
                from: 'bottom right',to:   'top left 1.1x', time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2884/Ice sculptures-5.jpg&width=350',
                from: 'bottom right',to:   'top left 1.1x', time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2896/Ice sculptures-6.jpg&width=350',
                from: 'bottom right',to:   'top left 1.1x', time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2908/Ice sculptures-7.jpg&width=350',
                from: '50% 100% 1x',to: '50% 0% 5.7x',time: 6                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2920/Ice sculptures-8.jpg&width=350',
                from: '100% 80% 1x',to: '100% 0% 1.7x',time:7                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2932/Ice sculptures-9.jpg&width=350',
                from: '100% 50%',to:   '30% 50% 1.5x',time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2944/Kadrioru Park-1.jpg&width=350',
                from: 'top left',to: 'bottom right 1.5x',time: 5                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2956/Vana Tallinn-1-2.jpg&width=350',
                from: '100% 80% 1x',to: '100% 0% 1.7x',time:7                }
                ,
                { src: '/umbraco/ImageGen.ashx?image=/media/2968/Vana Tallinn-1.jpg&width=350',
                from: '50% 100% 1x',to: '50% 0% 5.7x',time: 6

So, it got me thinking that my randomEffect() function was not as “random” as I thought. After some research, I came across this post about how to implement randomness using umbraco.library.GetRandom() as provided by Umbraco.

Hence my new and improved XSLT is:

xml version="1.0" encoding="UTF-8"?>
xsl:stylesheet [
 <!--ENTITY nbsp " ">
]>
<xsl:stylesheet
 version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:msxml="urn:schemas-microsoft-com:xslt"
 xmlns:msxsl="urn:schemas-microsoft-com:xslt"
 xmlns:umbraco.library="urn:umbraco.library"
 xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon"
 xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes"
 xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath"
 xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions"
 xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"
 xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
 xmlns:tagsLib="urn:tagsLib"
 xmlns:BlogLibrary="urn:BlogLibrary"
 xmlns:effects="http://www.umbraco.org/randomTools"
 exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary effects msxsl">

 <xsl:output method="xml" omit-xml-declaration="yes"/>
 <msxsl:script language="CSharp" implements-prefix="effects">
 bin/umbraco.dll"/>
 <!--[CDATA[-->
 public string randomEffect(int lowerLimit, int upperLimit)
 {
 StringBuilder sb = new StringBuilder();

 Random random = umbraco.library.GetRandom();

 lock(random)
 {
 switch (random.Next(lowerLimit, upperLimit))
 {
 case 0:
 sb.Append("from: '100% 80% 1x',to: '100% 0% 1.7x',time:7");
 break;
 case 1:
 sb.Append("from: 'top left',to: 'bottom right 1.5x',time: 5");
 break;
 case 2:
 sb.Append("from: 'bottom right',to:   'top left 1.1x', time: 5");
 break;
 case 3:
 sb.Append("from: '100% 50%',to:   '30% 50% 1.5x',time: 5");
 break;
 case 4:
 sb.Append("from: '50% 100% 1x',to: '50% 0% 5.7x',time: 6");
 break;

 default:
 sb.Append("from: '90% 60% 1x',to:   '80% 0% 1.7x',time: 5");
 break;
 }
 }

 return sb.ToString();
 }
 ]]>
 </msxsl:script>
 <xsl:param name="currentPage"/>

 <xsl:template match="/">
 <xsl:value-of select="umbraco.library:AddJquery()"/>
 <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('crossSlide', '/scripts/jquery.cross-slide.js')"/>
 <xsl:variable name="filePathStart">
 <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
 </xsl:variable>

 <xsl:variable name="fileWidth">
 <xsl:text>&amp;width=350</xsl:text>
 </xsl:variable>
 <script type="text/javascript">
 $('#image-block').crossSlide({
 fade: 1
 }, [
 <xsl:for-each select="$currentPage/descendant::node[@nodeTypeAlias='RunwayGalleryPhoto']">
 { src: '<xsl:value-of select="$filePathStart" disable-output-escaping="yes"/><xsl:value-of select="concat(substring-before(data [@alias='umbracoFile'],'.'), '.jpg')"/><xsl:value-of select="$fileWidth" disable-output-escaping="yes"/>',
 <xsl:value-of select="effects:randomEffect(0,5)"/>                }
 <xsl:if test="position() != last()">
 <xsl:text>,</xsl:text>
 </xsl:if>

 </xsl:for-each>
 ]);
 </script>
 </xsl:template>

</xsl:stylesheet>

Hope that helps someone out there.

Advertisements
Tagged with: , , ,
Posted in Umbraco blogs, XSLT

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

%d bloggers like this: