I would have my xslt macro generate the javascript code. Then you can mix server-side and client-side logic for the best of both worlds!

Depending on where you need the macro output you might end up with two macros... one for the js and one for the gallery itself. Or you might do it all in one macro.

cheers,
doug.

Hey Froad

Ideally you would make the gallery out of html formatted items/markup ie: <ul id="gallery"><li><a><img ... and use a generic js script to loop through these items constructing the gallery, rather than building the gallery in js.

Firstly so your html is accesible even without js and secondly you will only need to loop through html items in XSLT and include a js file or two and maybe a short script snippet.

ie: Gallery XSLT exmaple using Gallerific and Tree Multi Picker (with lefteris output) and a custom img sizer...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
   version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns:msxml="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" 
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets">


<xsl:output method="xml" omit-xml-declaration="yes" />

<xsl:param name="currentPage"/>
<xsl:template match="/">

<!-- GALLERIFFIC -->
<xsl:value-of select="umbraco.library:RegisterStyleSheetFile('gCSS', '/scripts/Galleriffic/css/galleriffic.css')"/>
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('gJS', '/scripts/Galleriffic/js/jquery.galleriffic.js')"/>
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('gOpacityJS', '/scripts/Galleriffic/js/jquery.opacityrollover.js')"/>
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('gInitJS', '/scripts/Galleriffic/js/galleriffic.init.js')"/>

<xsl:if test="($currentPage/data[@alias='images']/descendant::node!='')">
<div id="container" class="gallery-wrap">
<!-- GALLERY ASSETS -->
  <div id="gallery" class="content">
      <div class="slideshow-container">
           <div id="loading" class="loader"><xsl:text> </xsl:text></div>
         <div id="slideshow" class="slideshow"><xsl:text> </xsl:text></div>
        </div>
      <div id="controls" class="controls"><xsl:text> </xsl:text></div>
      <div id="caption" class="caption-container"><xsl:text> </xsl:text></div>
  </div>
<!-- IMAGES OUTPUT -->
    <div id="thumbs" class="thumb-navigation">

<ul class="thumbs noscript">
        
  <xsl:variable name="images" select="$currentPage/data[@alias='images']"/>  
 <xsl:for-each select="$images/descendant::node">

<xsl:variable name="media" select="umbraco.library:GetMedia(.,0)"/>
<xsl:variable name="imgSrc" select="$media/data[@alias='umbracoFile']"/>
<xsl:variable name="imgName" select="$media/@nodeName"/>

<li>
<xsl:attribute name="class">
 <xsl:if test="position()=1">first</xsl:if>
    <xsl:if test="position()=last()">last</xsl:if>
</xsl:attribute>
            <a class="thumb" name="" href="/scripts/imgSizer.aspx?i={$imgSrc}&amp;s=450&amp;x=h" title="{$imgName}">
        <img src="/scripts/imgSizer.aspx?i={$imgSrc}&amp;s=160&amp;x=w" alt="{$imgName}" />
            </a>
            <div class="caption"><xsl:text> </xsl:text></div>
</li>

   </xsl:for-each> 
</ul>

 </div>
</div>

</xsl:if>

</xsl:template>

</xsl:stylesheet>

Hope this helps!

is working on a reply...