Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
Hi folks
I've created a macro to generate a list for an image carousel. Its working fine, but I need to apply the class "selected" to the first <a> element, so we end up with the following mark up:
<ul><li><a href="images/making/content/image-01.jpg" title="Yummy cakes" class="selected">1</a></li><li><a href="images/making/content/image-02.jpg" title="Jammy Rings">2</a></li><li><a href="images/making/content/image-03.jpg" title="Macaroons">3</a></li></ul>
I also need to insert the uploadPhoto alias of the first child node into the img src attribute, within the photo div. This is what I've got so far:
<xsl:template match="/"> <div class="photos"> <div class="photo"><img src="" alt="Sorbet" /></div> <p class="caption"><strong><xsl:number/>. </strong>Sorbet</p> <div class="photos-nav clear"> <div class="clear"> <a href="#" class="back">Back</a> <!-- The fun starts here --> <ul> <xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']"> <li> <a href="{uploadPhoto}" title="{@nodeName}"><xsl:number/></a> </li> </xsl:for-each> </ul> <a href="#" class="next">Next</a> </div> </div> </div></xsl:template>
I appreciate this is probably quite basic, but I'm very, very new to this. Any help would be greatly appreciated!
Hi Richard,
Try this
<choose><when test="position() = 1"><a href="{uploadPhoto}" title="{@nodeName}" class="selected"><xsl:number/></a></when><otherwise> <a href="{uploadPhoto}" title="{@nodeName}"><xsl:number/></a></otherwise></choose>
Fuji, you're a star! That's done the trick! Thank you! :-D
You can use a little shortcut for that, so you don't have to duplicate any code - it all adds up, you know :-)
This also shows you how to grab the first childnode's uploadPhoto:
<xsl:template match="/"> <!-- Grab the documents --> <xsl:variable name="photoDocuments" select="$currentPage/*[@isDoc][not(umbracoNaviHide = 1)]" /> <div class="photos"> <div class="photo"> <img src="{$photoDocuments[1]/uploadPhoto}" alt="Sorbet" /> </div> <p class="caption"><strong><xsl:number/>. </strong>Sorbet</p> <div class="photos-nav clear"> <div class="clear"> <a href="#" class="back">Back</a> <ul> <xsl:for-each select="$photoDocuments"> <li> <a href="{uploadPhoto}" title="{@nodeName}"> <xsl:if test="position() = 1"> <xsl:attribute name="class">selected</xsl:attribute> </xsl:if> <xsl:number/> </a> </li> </xsl:for-each> </ul> <a href="#" class="next">Next</a> </div> </div> </div> </xsl:template>
/Chriztian
is working on a reply...
Write your reply to:
Upload image
Image will be uploaded when post is submitted
Applying a class to the first <a> element in a list only
Hi folks
I've created a macro to generate a list for an image carousel. Its working fine, but I need to apply the class "selected" to the first <a> element, so we end up with the following mark up:
<ul>
<li><a href="images/making/content/image-01.jpg" title="Yummy cakes" class="selected">1</a></li>
<li><a href="images/making/content/image-02.jpg" title="Jammy Rings">2</a></li>
<li><a href="images/making/content/image-03.jpg" title="Macaroons">3</a></li>
</ul>
I also need to insert the uploadPhoto alias of the first child node into the img src attribute, within the photo div. This is what I've got so far:
<xsl:template match="/">
<div class="photos">
<div class="photo"><img src="" alt="Sorbet" /></div>
<p class="caption"><strong><xsl:number/>. </strong>Sorbet</p>
<div class="photos-nav clear">
<div class="clear">
<a href="#" class="back">Back</a>
<!-- The fun starts here -->
<ul>
<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
<li>
<a href="{uploadPhoto}" title="{@nodeName}"><xsl:number/></a>
</li>
</xsl:for-each>
</ul>
<a href="#" class="next">Next</a>
</div>
</div>
</div>
</xsl:template>
I appreciate this is probably quite basic, but I'm very, very new to this. Any help would be greatly appreciated!
Hi Richard,
Try this
Fuji, you're a star! That's done the trick! Thank you! :-D
Hi Richard,
You can use a little shortcut for that, so you don't have to duplicate any code - it all adds up, you know :-)
This also shows you how to grab the first childnode's uploadPhoto:
<xsl:template match="/"> <!-- Grab the documents --> <xsl:variable name="photoDocuments" select="$currentPage/*[@isDoc][not(umbracoNaviHide = 1)]" /> <div class="photos"> <div class="photo"> <img src="{$photoDocuments[1]/uploadPhoto}" alt="Sorbet" /> </div> <p class="caption"><strong><xsl:number/>. </strong>Sorbet</p> <div class="photos-nav clear"> <div class="clear"> <a href="#" class="back">Back</a> <ul> <xsl:for-each select="$photoDocuments"> <li> <a href="{uploadPhoto}" title="{@nodeName}"> <xsl:if test="position() = 1"> <xsl:attribute name="class">selected</xsl:attribute> </xsl:if> <xsl:number/> </a> </li> </xsl:for-each> </ul> <a href="#" class="next">Next</a> </div> </div> </div> </xsl:template>/Chriztian
is working on a reply...