xlst function calling colorbox.js issue

Topics: General, XSLT
Aug 29, 2011 at 7:13 AM

Good morning,

I am trying to write an xslt function that will display the images that are located in a media file.  There are multiple galleries.  I have created an xlst function that calls the images from a specific gallery and used colorbox.js to display.  It works but I am getting an error in the colorbox.js because I am adding this function per gallery on the page and each function is writing the colorbox.js and the javascript variables needed to run the colorbox.  It does open each gallery, but there is a browser error and a delay.

Is there anyway to write this so I can avoid the duplicate js calls and get the same functionality?  I need the xslt function to be able to get the images in each media folder (for the selected linked gallery on the page) and show it in my colorbox.  And so on.

 

My Input Parameters:

Location --> this is the facility (or gallery) name.  I am using 

MediaFolder --> A selector to pick the correct gallery folder

Link -->  a sting that can be used to create the text in the link.  (default value is "see gallery")

My Function Calls

QuerystingValue = Parameter is "lid"   --> I am using this to create the "rel" value to group the images so Colorbox will display as a group

GetIMediaFileXml
filter
   Composite.Data.Types.IMedia.MediaFolderFilter  
   Media Folder = MediaFolder

Here is my XLST so far:

 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
  <xsl:variable name="FacilityTour" select="/in:inputs/in:result[@name='GetIMediaFileXml']" />
  <xsl:variable name="Link" select="/in:inputs/in:param[@name='Link']" />
  <xsl:variable name="Location" select="/in:inputs/in:param[@name='Location']" />
  <xsl:key name="by-location" match="IMediaFile" use="@FolderPath" />
  <xsl:template match="/">
    <html>
      <head>
       <link media="screen" rel="stylesheet" href="/Frontend/colorbox/colorbox5/colorbox.css" />
        <script src="/Frontend/colorbox/jquery.colorbox.js"></script>
 
                  
<script type='text/javascript'> 
  $(document).ready(function(){ 
  var $slideshow = $("a[rel='<xsl:value-of select='$Location'/>']"), timeout; 
  $(document).bind('cbox_complete', function(){ 
      if($slideshow.index($.colorbox.element()) == $slideshow.length - 1) 
  { 
          timeout = 
  setTimeout($.colorbox.close,$.colorbox.settings.slideshowSpeed); 
      } 
  }).bind('cbox_Cleanup cbox_Load', function(){ 
      clearTimeout(timeout); 
  }); 
    $slideshow.colorbox({loop:false, slideshow:true, photo: true}); 
  });
	</script>

      </head>
      <body>
        <xsl:for-each select="$FacilityTour/IMediaFile[generate-id(.)=generate-id(key('by-location',@FolderPath))]">
          <xsl:sort select="@FolderPath" />
          <xsl:variable name="LinkText" select="$Link" />
          <h2>
            <a title=" " href="/Renderers/ShowMedia.ashx?id={@Id}&amp;lid={$Location}">
              <xsl:attribute name="rel"><xsl:value-of select="$Location"/></xsl:attribute>
              <xsl:value-of select="$LinkText" />
            </a>
          </h2>
          <xsl:for-each select="/in:inputs/in:result[@name='GetIMediaFileXml']/IMediaFile">
            <a title="{@Title}" href="/Renderers/ShowMedia.ashx?id={@Id}&amp;lid={$Location}">
              <xsl:attribute name="rel"><xsl:value-of select="$Location"/></xsl:attribute>
              <img style="display:none;" src="/Renderers/ShowMedia.ashx?id={@Id}" title="{@Title}" alt="" />
            </a>
          </xsl:for-each>
        </xsl:for-each>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

THE OUTPUT:

<html
 xmlns="http://www.w3.org/1999/xhtml">
     <head>
        <link media="screen" rel="stylesheet" href="/Frontend/colorbox/colorbox5/colorbox.css"/>
        <script src="/Frontend/colorbox/jquery.colorbox.js"/>
        <script type="text/javascript">    $(document).ready(function(){    var $slideshow = $(&quot;a[rel='']&quot;), timeout;    $(document).bind('cbox_complete', function(){        if($slideshow.index($.colorbox.element()) == $slideshow.length - 1)    {            timeout =    setTimeout($.colorbox.close,$.colorbox.settings.slideshowSpeed);        }    }).bind('cbox_Cleanup cbox_Load', function(){        clearTimeout(timeout);    });      $slideshow.colorbox({loop:false, slideshow:true, photo: true});    }); </script>
    </head>
     <body>
         <h2>
            <a title=" " href="/Renderers/ShowMedia.ashx?id=366b7969-5810-42f4-b3b6-8ad684083ccd&amp;lid=" rel="">Facility Tour</a>
        </h2>
         <a title="Abbey Receptionist Desk" href="/Renderers/ShowMedia.ashx?id=366b7969-5810-42f4-b3b6-8ad684083ccd&amp;lid=" rel="">
            <img style="display:none;" src="/Renderers/ShowMedia.ashx?id=366b7969-5810-42f4-b3b6-8ad684083ccd" title="Abbey Receptionist Desk" alt=""/>
        </a>
         <a title="Abbey Exam Room Hallway" href="/Renderers/ShowMedia.ashx?id=46782a12-9f77-48d5-81e0-351b1d47e812&amp;lid=" rel="">
            <img style="display:none;" src="/Renderers/ShowMedia.ashx?id=46782a12-9f77-48d5-81e0-351b1d47e812" title="Abbey Exam Room Hallway" alt=""/>
        </a>
         <a title="Abbey Exam Room" href="/Renderers/ShowMedia.ashx?id=65e639e3-57ef-4b9d-88da-fa14705ee58e&amp;lid=" rel="">
            <img style="display:none;" src="/Renderers/ShowMedia.ashx?id=65e639e3-57ef-4b9d-88da-fa14705ee58e" title="Abbey Exam Room" alt=""/>
        </a>
         <a title="Abbey exam hallway" href="/Renderers/ShowMedia.ashx?id=8b02787e-1c64-4162-8b30-48d9a0dba838&amp;lid=" rel="">
            <img style="display:none;" src="/Renderers/ShowMedia.ashx?id=8b02787e-1c64-4162-8b30-48d9a0dba838" title="Abbey exam hallway" alt=""/>
        </a>
         <a title="Abbey Patient View" href="/Renderers/ShowMedia.ashx?id=8f52e288-4523-4960-865a-7764745ec1f2&amp;lid=" rel="">
            <img style="display:none;" src="/Renderers/ShowMedia.ashx?id=8f52e288-4523-4960-865a-7764745ec1f2" title="Abbey Patient View" alt=""/>
        </a>
         <a title="Abbey Waiting Room" href="/Renderers/ShowMedia.ashx?id=b21115a0-aaad-4c53-a394-7b7dec727ef6&amp;lid=" rel="">
            <img style="display:none;" src="/Renderers/ShowMedia.ashx?id=b21115a0-aaad-4c53-a394-7b7dec727ef6" title="Abbey Waiting Room" alt=""/>
        </a>
         <a title="parking sign" href="/Renderers/ShowMedia.ashx?id=cb8485d5-35f7-4cd3-a8ac-7051c2e13afd&amp;lid=" rel="">
            <img style="display:none;" src="/Renderers/ShowMedia.ashx?id=cb8485d5-35f7-4cd3-a8ac-7051c2e13afd" title="parking sign" alt=""/>
        </a>
         <a title="dcmfmi" href="/Renderers/ShowMedia.ashx?id=d1e7b292-4c67-470d-b429-b1288653ed2d&amp;lid=" rel="">
            <img style="display:none;" src="/Renderers/ShowMedia.ashx?id=d1e7b292-4c67-470d-b429-b1288653ed2d" title="dcmfmi" alt=""/>
        </a>
         <a title="reserved patient parking spots" href="/Renderers/ShowMedia.ashx?id=dac6683c-e11d-401c-af65-e5f12a9682ce&amp;lid=" rel="">
            <img style="display:none;" src="/Renderers/ShowMedia.ashx?id=dac6683c-e11d-401c-af65-e5f12a9682ce" title="reserved patient parking spots" alt=""/>
        </a>
    </body>
</html>


 

 

Aug 29, 2011 at 7:42 AM

>> Is there anyway to write this so I can avoid the duplicate js calls

Add "id" attribute to the SCRIPT tags:

<script id="jquery-colorbox-js" src="/Frontend/colorbox/jquery.colorbox.js"></script>


<script id="slideshow" type='text/javascript'> 
  $(document).ready(function(){ 
  var $slideshow = $("a[rel='<xsl:value-of select='$Location'/>']"), timeout; 
  $(document).bind('cbox_complete', function(){ 
      if($slideshow.index($.colorbox.element()) == $slideshow.length - 1) 
  { 
          timeout = 
  setTimeout($.colorbox.close,$.colorbox.settings.slideshowSpeed); 
      } 
  }).bind('cbox_Cleanup cbox_Load', function(){ 
      clearTimeout(timeout); 
  }); 
    $slideshow.colorbox({loop:false, slideshow:true, photo: true}); 
  });
	</script>

Aug 29, 2011 at 2:54 PM

Thanks you - I was putting the ID on the wrong js.  Worked perfectly.

One last question.  When I click on my link to open the colorbox photo tour, It shows me the first image twice.  This is because I had to create the link with needs the path to the image.  How can I avoid showing the double first image.

 

 <h2>
            <a title=" " href="/Renderers/ShowMedia.ashx?id={@Id}&amp;lid={$Location}">
              <xsl:attribute name="rel"><xsl:value-of select="$Location"/></xsl:attribute>
              <xsl:value-of select="$LinkText" />
            </a>
          </h2>
          <xsl:for-each select="/in:inputs/in:result[@name='GetIMediaFileXml']/IMediaFile">
            <a title="{@Title}" href="/Renderers/ShowMedia.ashx?id={@Id}&amp;lid={$Location}">
              <xsl:attribute name="rel"><xsl:value-of select="$Location"/></xsl:attribute>
              <img style="display:none;" src="/Renderers/ShowMedia.ashx?id={@Id}" title="{@Title}" alt="" />
            </a>
          </xsl:for-each>

Aug 30, 2011 at 8:02 AM

It looks like your Colorbox plugin shows images from A tags with rel="$Location",  so try to not add rel attribute to the first your link within H2.

<h2><a title=" " href="/Renderers/ShowMedia.ashx?id={@Id}&amp;lid={$Location}">
 <xsl:value-of select="$LinkText" />
</a>
</h2>
<xsl:for-each select="/in:inputs/in:result[@name='GetIMediaFileXml']/IMediaFile">
            <a title="{@Title}" href="/Renderers/ShowMedia.ashx?id={@Id}&amp;lid={$Location}">
              <xsl:attribute name="rel"><xsl:value-of select="$Location"/></xsl:attribute>
              <img style="display:none;" src="/Renderers/ShowMedia.ashx?id={@Id}" title="{@Title}" alt="" />
            </a>
</xsl:for-each>