Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Matthew Jarvis 129 posts 129 karma points
    Oct 11, 2011 @ 17:23
    Matthew Jarvis
    0

    Creating a jQuery header image slideshow

    Hi, had a looked through the forums if other's have implemented what I hope to achieve but couldnt find any answers.

    I have a JQuery image header running on a test site at http://web3.ystrad-mynach.ac.uk/1950.aspx that is powered using a jQuery slideshow courtesy of http://jquery.malsup.com/cycle/anchor.html

    What I plan is to create a folder within my media section for "Headerimages", where images that I wish to feautre in my slideshow above will be housed, properties will be assigned to these images such as "Image Title" "Description" "Link" to mirror my current hardcoded set up

    How would I go about linking this image folder into my jQuery slideshow.  Currently it is hardcoded in via HTML

      <!-- images -->
          <div class="pics">        
            <div class="pics">        
            <img src="images/highlights_01.jpg" title="Online Enrolment" alt="You can now enrol on your preferred course online, without the need to get out the house." url="#1" width="610" />
            <img src="images/highlights_01.jpg" title="Online Enrolment 2" alt="You can now enrol on your preferred course online, without the need to get out the house." url="#2" width="610" />
            <img src="images/highlights_01.jpg" title="Online Enrolment 3" alt="You can now enrol on your preferred course online, without the need to get out the house." url="#3" width="610" />
            <img src="images/highlights_01.jpg" title="Online Enrolment 4" alt="You can now enrol on your preferred course online, without the need to get out the house." url="#4" width="610" />      
          </div>      

     I assume it would be an XSLT query that would seelct a particuarly media note and display. My XSLT knowledge is poor, if anyone has written a script already that achives what I plan to do, would be great to have some advice.

    Many Thanks

    Matt

  • Mike Chambers 629 posts 1224 karma points c-trib
    Oct 11, 2011 @ 17:31
  • Matthew Jarvis 129 posts 129 karma points
    Oct 11, 2011 @ 17:56
    Matthew Jarvis
    0

    Hi Mike, that's just what I needed, what you posted is just what I need. 

    I will likely go down the custom media type via a macro.  From the code you posted  on that thread

    {!--macro param--}
    <
    xsl:variable name="MediaNodeId"select="/macro/MediaNode/Folder/@id"/>
    or
    {!--doc param--}
    <xsl:variable name="MediaNodeId"select="$currentPage/MediaNode/Folder/@id"/>
    ...
    <xsl:for-each select="umbraco.library:GetMedia($MediaNodeId, 1)/{CUSTOMMEDIATYPE}">
    ...
    xsl:for-each>

    Would you have a compelte XSLT that you have created which you coud share?

    P.S I somehow marked my reply as a solution (even though it isn't) lol!

    Thanks

  • Mike Chambers 629 posts 1224 karma points c-trib
    Oct 11, 2011 @ 18:27
    Mike Chambers
    0

    the xslt script that I have doesn't use jquery.malsup but a custom implementation on top of the jqueryUI framework...

    looking at your html above... think this should be close to what you want... untested so may need some debugging....

     

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


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

    <xsl:param name="currentPage"/>
    <xsl:variable name="MediaNodeId" select="/macro/MediaNode/Folder/@id"/>

    <xsl:template match="/">
      <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('Malsup', 'pathtoJSFile')"/>

      <div class="pics">        
        <div class="pics">
          <xsl:for-each select="umbraco.library:GetMedia($MediaNodeId, 1)/MEDIATYPE">
            <img src="{./umbracoFile}" title="{./title}" alt="{./alt}" url="{./url}" width="{./width}" />
          </xsl:for-each>
       </div>
      </div>

    </xsl:template>

    </xsl:stylesheet>

     

     

  • Matthew Jarvis 129 posts 129 karma points
    Oct 12, 2011 @ 10:28
    Matthew Jarvis
    0

    Hi Mike thanks for the guidance, as I said my XSLT knowledge is not great, am receiving this error message

    System.OverflowException: Value was either too large or too small for an Int32.
    at System.Convert.ToInt32(Double value)
    at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)
    at System.Xml.Xsl.Runtime.XmlQueryRuntime.ChangeTypeXsltArgument(XmlQueryType xmlType, Object value, Type destinationType)
    at System.Xml.Xsl.Runtime.XmlQueryContext.InvokeXsltLateBoundFunction(String name, String namespaceUri, IList`1[] args)
    at (XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at Root(XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at System.Xml.Xsl.XmlILCommand.Execute(Object defaultDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlWriter writer)
    at System.Xml.Xsl.XslCompiledTransform.Transform(IXPathNavigable input, XsltArgumentList arguments, TextWriter results)
    at umbraco.presentation.webservices.codeEditorSave.SaveXslt(String fileName, String oldName, String fileContents, Boolean ignoreDebugging)

    I have edited your XSLT for my needs

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

    <xsl:param name="currentPage"/>
    <xsl:variable name="MediaNodeId" select="/macro/MediaNode/Folder/@id"/>

    <xsl:template match="/">
      <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('Malsup', 'js/jquery.cycle/jquery.cycle.all.min.js')"/>
            
        <div class="pics">
          <xsl:for-each select="umbraco.library:GetMedia($MediaNodeId, 1)/Headerimages">
            <img src="{./umbracoFile}" title="{./title}" alt="{./description}" url="{./url}" width="{./width}" />
          xsl:for-each>
       div>
     
    xsl:template>

    xsl:stylesheet>

     I have named my MediaType - Headerimages, do I need to change the variable name to Headerimages? Also my macro is now called headerimages. Would anything need to change to reflect this in my XSLT.

    Thanks, Matt

     

  • Mike Chambers 629 posts 1224 karma points c-trib
    Oct 12, 2011 @ 14:37
    Mike Chambers
    0

    ah, you may need a check for the mediaNode not being empty...

    add an if around the for-each

    <xsl:if test="$MediaNodeId != '' and $MediaNodeId != false() ">
    ....
    </xsl:if>
  • Matthew Jarvis 129 posts 129 karma points
    Oct 12, 2011 @ 17:22
    Matthew Jarvis
    0

    Hi Mike, still not getting any joy (although error messages are now no longer displayed) web page just does not display no images  This is my current HTML surrounding the area:-


               
          <div class="pics">
          
          <umbraco:Macro Alias="Headerimage" runat="server"></umbraco:Macro>
            
       
          </div>

    This is my XSLT:-

    <?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:variable name="MediaNodeId" select="/macro/MediaNode/Folder/@id"/>

    <xsl:template match="/">
      <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('cycle', '/js/jquery.cycle/jquery.cycle.all.min.js')"/>
            
             
          <xsl:if test="$MediaNodeId != '' and $MediaNodeId != false() ">   
          
          <xsl:for-each select="umbraco.library:GetMedia($MediaNodeId, 1)/Headerimages">
            <img src="{./umbracoFile}" title="{./title}" alt="{./description}" url="{./url}" width="{./width}" />
          </xsl:for-each>
          
          </xsl:if>
          
     
      </xsl:template>

    </xsl:stylesheet>

     

    Headerimages is the new mediatype I have created.  Looking at my XSLT would I need to change the variable name which is currently MediaNodeId or is this irrelevent?

    Your help is much appreciated.

  • Mike Chambers 629 posts 1224 karma points c-trib
    Oct 12, 2011 @ 17:37
    Mike Chambers
    0

    Ok, you are missing the vital link....

    You need to add a paramater to your macro! called MediaNode, and set it's type as mediaCurrent... then when you insert the macro into the tempalte you will get a dialogue asking you to pick the folder from the media area where your images are contained.

  • Matthew Jarvis 129 posts 129 karma points
    Oct 12, 2011 @ 17:42
    Matthew Jarvis
    0

    Mike,

    That was it...! All working great.  Many thanks for your help, clocking off in 20mins with a big smile on my face

  • Mike Chambers 629 posts 1224 karma points c-trib
    Oct 12, 2011 @ 17:44
    Mike Chambers
    0

    Glad to help.

  • Matthew Jarvis 129 posts 129 karma points
    Jan 05, 2012 @ 11:57
    Matthew Jarvis
    0

    Hi Mike,

    Just encountered a small issue, i'd like to be able to return a NiceUrl rather than the NodeId I am currently receiving.  Do you have idea how I would implement this in the above code.  I'm guessing NiceUrl declaration needs to be wrapped around the URL in my XSLT but have been unable to work it out. 

     

    <xsl:templatematch="/">
      <xsl:value-ofselect="umbraco.library:RegisterJavaScriptFile('cycle', '/js/jquery.cycle/jquery.cycle.all.min.js')"/>
           
             
          <xsl:iftest="$MediaNodeId != '' and $MediaNodeId != false() ">    
         
          <xsl:for-eachselect="umbraco.library:GetMedia($MediaNodeId, 1)/Headerimages">
            <imgsrc="{./umbracoFile}"title="{./title}"alt="{./description}"url="{./url}"width="{./width}"/>
          </xsl:for-each>
         
          </xsl:if>
           
     
      </xsl:template>
  • Mike Chambers 629 posts 1224 karma points c-trib
    Jan 05, 2012 @ 12:23
    Mike Chambers
    0

    I assume you mean ./url is giving you a node id?

    if so then use the umbraco.library method NiceUrl

    url="{umbraco.library:NiceUrl(./url)}"

  • Matthew Jarvis 129 posts 129 karma points
    Jan 05, 2012 @ 12:28
    Matthew Jarvis
    0

    That's perfect, many thanks, tried wrapping umbraco.library method NiceUrl a few ways but couldnt get it to work. Great stuff!

  • Matthew Jarvis 129 posts 129 karma points
    Aug 24, 2012 @ 16:20
    Matthew Jarvis
    0

    Hi Mike,

    Just noticed a small issue with my image slideshow. URL links work great it seems at top level pages (http://www.ystrad-mynach.ac.uk/home) but at any child level pages (http://www.ystrad-mynach.ac.uk/the-college/about/) URL links are linking to current page.

    I'm assuming i'm missing perhaps a '../' somewhere possible as it might be an absolute/relative link issue.  Hoping you can solve my problem.

    Many Thanks

    Matt

Please Sign in or register to post replies

Write your reply to:

Draft