CQWP OuterTemplate.SlideShowBody

OuterTemplate.SlideShowBody.xsl

<xsl:template name="OuterTemplate.SlideShowBody">
    <xsl:param name="Rows" />
    <xsl:param name="FirstRow" />
    <xsl:param name="LastRow" />

    <script type="text/javascript">


      function loadScript(url, callback)
      {
        // adding the script tag to the head as suggested before
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;

        // then bind the event to the callback function
        // there are several events for cross browser compatibility
        script.onreadystatechange = callback;
        script.onload = callback;

        // fire the loading
        head.appendChild(script);
      }

      function InitSlideControlNavButtons(slideshowObject) {
        var btn_prev = document.getElementById("btn_prev");
        AddEvtHandler(btn_prev, "onclick", function() { NextPrevious(slideshowObject, false);});
        var btn_pp = document.getElementById("btn_pp");
        AddEvtHandler(btn_pp, "onclick", function() { PlayPause(slideshowObject);});
        var btn_next = document.getElementById("btn_next");
        AddEvtHandler(btn_next, "onclick", function() { NextPrevious(slideshowObject, true);});
      }


      <xsl:text>var widthArray = [</xsl:text>
      <xsl:for-each select="$Rows">
        <xsl:value-of select="@ImageWidth" />
        <xsl:if test="position() != last()">, </xsl:if>
      </xsl:for-each>
      <xsl:text>];</xsl:text>

      <xsl:text>var linkArray = [</xsl:text>
      <xsl:for-each select="$Rows">
        <xsl:value-of select="concat('&quot;',@LinkUrl,'&quot;')" />
        <xsl:if test="position() != last()">, </xsl:if>
      </xsl:for-each>
      <xsl:text>];</xsl:text>

      <xsl:text>var heightArray = [</xsl:text>
      <xsl:for-each select="$Rows">
        <xsl:value-of select="@ImageHeight" />
        <xsl:if test="position() != last()">, </xsl:if>
      </xsl:for-each>
      <xsl:text>];</xsl:text>

      <xsl:text>var pictureArray = [</xsl:text>
      <xsl:for-each select="$Rows">
        <xsl:value-of select="concat('&quot;',@LinkUrl,'&quot;')" />
        <xsl:if test="position() != last()">, </xsl:if>
      </xsl:for-each>
      <xsl:text>];</xsl:text>

      <xsl:text>var titleArray = [</xsl:text>
      <xsl:for-each select="$Rows">
        <xsl:value-of select="concat('&quot;',@Title,'&quot;')" />
        <xsl:if test="position() != last()">, </xsl:if>
      </xsl:for-each>
      <xsl:text>];</xsl:text>

      <xsl:text>var descriptionArray = [</xsl:text>
      <xsl:for-each select="$Rows">
        <xsl:value-of select="concat('&quot;',@Description,'&quot;')" />
        <xsl:if test="position() != last()">, </xsl:if>
      </xsl:for-each>
      <xsl:text>];</xsl:text>

     

      loadScript("/_layouts/1033/imglib.js", function()
      {
        var slidecontrol = new SlideshowObject('slidecontrol_', pictureArray, linkArray, titleArray, descriptionArray, heightArray, widthArray, 15, 1.0);
        ChangePic(slidecontrol);
        InitSlideControlNavButtons(slidecontrol);
      });

    </script>


    <xsl:call-template name="SlideShowControl" >
    </xsl:call-template>
  </xsl:template>
  <xsl:template name="SlideShowControl">
    <table border="0" style="table-layout: fixed">
      <tbody>
        <tr>
          <td >
            <div id="slidecontrol_cell" style="display: table-cell; vertical-align: middle; text-align: center;">
              <span style="vertical-align: middle; height: 100%; display: inline-block"></span>
              <a id="slidecontrol_link" target="_blank">
                <img id="slidecontrol_curr" style="opacity: 0.9900000000000007; border: 0px; vertical-align: middle;" alt=""/>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td style="height: 75px">
            <div style="height: 75px; opacity: 0.9900000000000007;" id="slidecontrol_text">
              <span id="slidecontrol_title" class="ms-slideshow-title"></span>
              <br/>
            </div>
          </td>
        </tr>
        <tr>
          <td style="text-align: center">
            <a id="btn_prev" >
              <img border="0" style="position: relative; cursor: hand" onmouseover="HiliteButton()" onmouseout="DemoteButton()" src="/_layouts/images/plprev1.gif" alt="Previous Image"/>
            </a>
            <a id="btn_pp" >
              <img border="0" style="position: relative; cursor: hand" onmouseover="HiliteButton()" onmouseout="DemoteButton()" src="/_layouts/images/plpause1.gif" id="slidecontrol_playpause" alt="Pause"/>
            </a>
            <a id="btn_next">
              <img border="0" style="position: relative; cursor: hand" onmouseover="HiliteButton()" onmouseout="DemoteButton()" src="/_layouts/images/plnext1.gif" alt="Next Image"/>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
    <img id="slidecontrol_next" width="0" height="0" style="visibility: hidden" />
    <img id="slidecontrol_prev" width="0" height="0" style="visibility: hidden" />
    <img id="slidecontrol_pp" width="0" height="0" style="visibility: hidden" />
  </xsl:template>