Forgot to say that I am using v 4.8.0

Hi Brian

You need to feed the $url variable to your href as well. Right now you're giving it the xml of your media lookup, which is why it does not work. Inside your if it should be

<xsl:if test="$media">
<xsl:variable name="url" select="$media/umbracoFile" />
<xsl:variable name="width" select="$media/umbracoWidth" />
<xsl:variable name="height" select="$media/umbracoHeight" />

<a href="{$url}">
<img src="{$url}" width="{$width}" height="{$height}" />
</a>


</xsl:if>

This should do the trick.

/Jan

Thanks Jan,

I have amended the code but it is still not working.  When you click on the thumbnail to display the large image it seems to be struggling to find the link for the main image.

This is my code now

<li>
                    <a href="umbraco.library:GetMedia(projectImage1, 0)">
                      
                      
                      <!--media item begins-->
                        <xsl:variable name="media" select="umbraco.library:GetMedia(projectImage1Small, 0)"/>

 <xsl:if test="$media">
        <xsl:variable name="url" select="$media/umbracoFile"/>
        <xsl:variable name="width" select="$media/umbracoWidth"/>
        <xsl:variable  name="height" select="$media/umbracoHeight"/>
        <img src="{$url}" width="width" height="height"/>
   
         <a href="{$url}">
          <img src="{$url}" width="{$width}" height="{$height}" />
        </a>
       </xsl:if>
                      
                      <!-- media item ends-->
                      
                      
                    </a>
                   
                </li>

I will also include the full code, just in case it is something random that I have missed elsewhere:

<?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" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary"
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary ">


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

 <xsl:param name="currentPage"/>
<xsl:template match="projectImage1">
<img src="{.}"  />
</xsl:template>
    <xsl:template match="projectImage1Small">
<img src="{.}"  />
</xsl:template>

  <xsl:variable name="numberOfItems">
    <xsl:choose>
      <xsl:when test="/macro/numberOfItems != ''">
        <xsl:value-of select="/macro/numberOfItems"/>
      </xsl:when>
      <xsl:otherwise>9999</xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:variable name="excerptLength">
    <xsl:choose>
      <xsl:when test="string(/macro/excerptLength) != ''">
        <xsl:value-of select="/macro/excerptLength"/>
      </xsl:when>
      <xsl:otherwise>300000</xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
 <xsl:template match="/">
  
      <xsl:for-each select="$currentPage/ProjectArticle [@isDoc and string(umbracoNaviHide) != '1']">
        <xsl:sort select="@updateDate" order="descending" />
        <xsl:if test="position() &lt;= $numberOfItems">
          <div class="projectlist">
           
         <div class="ppy" id="ppy1">
            <ul class="ppy-imglist">
                <li>
                    <a href="umbraco.library:GetMedia(projectImage1, 0)">
                      
                      
                      <!--media item begins-->
                        <xsl:variable name="media" select="umbraco.library:GetMedia(projectImage1Small, 0)"/>

 <xsl:if test="$media">
        <xsl:variable name="url" select="$media/umbracoFile"/>
        <xsl:variable name="width" select="$media/umbracoWidth"/>
        <xsl:variable  name="height" select="$media/umbracoHeight"/>
        <img src="{$url}" width="width" height="height"/>
   
         <a href="{$url}">
          <img src="{$url}" width="{$width}" height="{$height}" />
        </a>
       </xsl:if>
                      
                      <!-- media item ends-->
                      
                      
                    </a>
                   
                </li>
               
            </ul>
            <div class="ppy-outer">
                <div class="ppy-stage">
                    <div class="ppy-nav">
                        <a class="ppy-prev" title="Previous image">Previous image</a>
                        <a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
                        <a class="ppy-switch-compact" title="Close">Close</a>
                        <a class="ppy-next" title="Next image">Next image</a>
                    </div>
                </div>
            </div>
            <div class="ppy-caption">
                <div class="ppy-counter">
                    Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong> 
                </div>
                <span class="ppy-text"></span>
            </div>
            </div>

            
            <!--project gallery ends here-->
              
            
              <div class="info">
                 <h2>
              
                <xsl:value-of select="@nodeName"/>
              
            </h2>
                <p><strong>What:</strong><xsl:value-of select="what" disable-output-escaping="yes"/></p>
                <p><strong>Where:</strong><xsl:value-of select="where" disable-output-escaping="yes"/></p>
                <p><strong>When:</strong><xsl:value-of select="when" disable-output-escaping="yes"/></p>
                <p><strong>More info:</strong><xsl:value-of select="furtherContent" disable-output-escaping="yes"/></p>

            </div><!--info-->          
            
            
                        </div><!--projectlist-->
          
        
            
        
          
        
        </xsl:if>
      </xsl:for-each>
  </xsl:template>

</xsl:stylesheet>

Hi Brian,

The surrounding link goes to this "address" : umbraco.library:GetMedia(projectImage1, 0)

Looks like you just forgot to add the curlies, i.e.: <a href="{umbraco.library:GetMedia(projectImage1, 0)}">

/Chriztian

Thanks Chriztian,

Alas this hasn't worked either!  Another weird issue that has arisen is that the slideshow is only appearing on my first entry for the list page (see below)

My code is now reading  (I noticed I had referenced my normal images and thumbnails round the wrong way)

<li>
                    <a href="{umbraco.library:GetMedia(projectImage2, 0)}">
                      
                      
                      <!--media item begins-->
                        <xsl:variable name="media" select="umbraco.library:GetMedia(projectImage2Small, 0)"/>

                 <xsl:if test="$media">
                    <xsl:variable name="url" select="$media/umbracoFile"/>
                    <xsl:variable name="width" select="$media/umbracoWidth"/>
                    <xsl:variable  name="height" select="$media/umbracoHeight"/>
                    <img src="{$url}" width="width" height="height"/>
   
               <a href="{$url}">
                <img src="{$url}" width="{$width}" height="{$height}" />
              </a>
               </xsl:if>
                      
                      <!-- media item ends-->
                      
                      
                    </a>
                   
                </li>

Clicking through the thumbnails it is almost as though it is posting two of the same image in a row e.g.

(Click) > image1 (click) > image 1 (click) > image2 (click) > image 2 etc...

Hi Brian,

Try comparing the HTML source (the actual source) with the browser's DOM inspector source, and see if you're getting unexpected differences. There's a couple of places where you could get some empty elements that the browser would try to "fix" by itself...

If you see something like a link with no content, e.g.: <a href="..." /> you can try to set the output mode to html:

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

Not sure what else to look for at the moment...

/Chriztian

Thanks Chriztian, I'll have a look and let you know.

Cheers for your help guys.

Hi Chriztian,

I've decided to start again with this one, getting more and more confused with the javascript let alone the XSLT!!!

Is there any way to include an XSLT/macro within another XSLT?  The reason I ask is because I think this is the only way I can the slideshow to replicate for each of the list item nodes I have.

Hi Brian,

Yes you can do that - but there is no need for it, I'm sure. XSLT is very flexible with that - but it's of course something you'll have to have a firm grip on.

I would love to help you nail this - I've done lots of sliders/slideshows with XSLT...

One thing a lot of people totally forget is, whichever technology you're using for these kinds of things (Razor/XSLT, MVC/Masterpages etc.), you're simply generating HTML - so the very first thing you have to do is to know exactly what the output is going to look like; especially for a slideshow, you need to build a working dummy that you can just put into the view file at first. THEN you start replacing all the repeating stuff and grab the dynamic parts from the Umbraco structure.

Do you have the expected final result for a slideshow with e.g. three slides?

/Chriztian

Hi Chriztian,

Thank you for your comments and yes I fully appreciate where you are coming from.  I have myself implemented a number of various slideshows and never had such issues so puzzled on this one.

I have set up a test slide show (you can see it in practice here http://dev3.bmhwebdev.co.uk/projects.aspx)  and you will see a single slideshow however when you look at the code there are multiple sets of code (one for each sub page so there should be 4).

Wondering if the Javascript is now causing the issue rather than the XSLT itself....

This is the XSLT I have set up just for the slideshow

<?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" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary" xmlns:PS.XSLTsearch="urn:PS.XSLTsearch" xmlns:UCommentLibrary="urn:UCommentLibrary" 
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary PS.XSLTsearch UCommentLibrary ">


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

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- start writing XSLT -->
  
        <xsl:for-each select="$currentPage/ProjectArticle [@isDoc and string(umbracoNaviHide) != '1']">

          <h2><xsl:value-of select="@nodeName" disable-output-escaping="yes"/></h2>
  
   <div class="ppy" id="ppy1">
            <ul class="ppy-imglist">
                <li>
                    <a href="http://dev3.bmhwebdev.co.uk/images/gallery/large/3.jpg">
                        <img src="http://dev3.bmhwebdev.co.uk/images/gallery/3.jpg" alt="" />
                    </a>
                   
                </li>
                <li>
                    <a href="http://dev3.bmhwebdev.co.uk/images/gallery/large/2.jpg">
                        <img src="http://dev3.bmhwebdev.co.uk/images/gallery/2.jpg" alt="" />
                    </a>
                   
                </li>
            </ul>
            <div class="ppy-outer">
                <div class="ppy-stage">
                    <div class="ppy-nav">
                        <a class="ppy-prev" title="Previous image">Previous image</a>
                        <a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
                        <a class="ppy-switch-compact" title="Close">Close</a>
                        <a class="ppy-next" title="Next image">Next image</a>
                    </div>
                </div>
            </div>
            <div class="ppy-caption">
                <div class="ppy-counter">
                    Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong> 
                </div>
                <span class="ppy-text"></span>
            </div>
   </div>
  
       </xsl:for-each>


</xsl:template>

</xsl:stylesheet>

Hi Brian,

Got some errors viewing that page at first - but now it looks like a list of projects (no sllideshow - but I'm guessing that's because there's no JS doing that atm.?)

Anyway, just wanted to illustrate the method="xml" thing I mentioned earlier - if you take the last part of your XSLT:

<div class="ppy-caption">
    <div class="ppy-counter">
        Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong> 
    </div>
    <span class="ppy-text"></span>
</div>

In XSLT with <xsl:output method="xml" /> this is what is output to the browser (View source):

<div class="ppy-caption">
    <div class="ppy-counter">
        Image <strong class="ppy-current" /> of <strong class="ppy-total" />
    </div>
    <span class="ppy-text" />
</div>

Which the browser actually interprets as this DOM structure (Inspect element):

<div class="ppy-caption">
    <div class="ppy-counter">
        Image
        <strong class="ppy-current">
            of
            <strong class="ppy-total"></strong>
        </strong>
    </div>
    <strong class="ppy-current">
        <strong class="ppy-total">
            <span class="ppy-text"></span>
        </strong>
    </strong>
</div>
<strong class="ppy-current">
    <strong class="ppy-total"></strong>
</strong>

Something like this is very likely to mess up any script that relies on these elements to be at certain points in the DOM etc.

/Chriztian

is working on a reply...