Hi Guys,
I have a custom jquery slider which is populated using XSLT - Here is my code for you guys to have a look and feel free to reuse:
<div id="news-feature-wrap" class="clearfix">
<ul id="news-feature-img-wrap">
<xsl:for-each select="$currentPage/FeaturedArticle">
<li>
<xsl:if test="featuredArticleImage > 0">
<xsl:variable name="img" select="umbraco.library:GetMedia(featuredArticleImage, 0)" />
<xsl:variable name="imgPath" select="concat(substring-before($img/umbracoFile,'.'), '.jpg')" />
<img class="person-image" src="/ImageGen.ashx?image={$imgPath}&width=550&" alt="{@nodeName}" />
</xsl:if>
<div class="news-item-brief">
<span>
<xsl:value-of select="featuredBrief" />
</span>
<a href="{umbraco.library:NiceUrl(@id)}">Read More</a>
</div>
</li>
</xsl:for-each>
</ul>
<ul id="news-items">
<xsl:for-each select="$currentPage/FeaturedArticle">
<li>
<a href="#">
<xsl:value-of select="@nodeName" />
</a>
</li>
</xsl:for-each>
</ul>
</div>
Here is a JSfiddle of the working solution including CSS ( for anyone that wants to reuse: http://jsfiddle.net6j4cT/30/ )
My scenario: A user creates a "Featured Article" and the nav & feature image is automatically populated which is good however...
There will be more than "4" featured articles created within the umbraco UI but the slider must only display 4 featured articles. The 4 featured articles will be "selected" on each "article" to populate the slider ( if that makes sense ).
I had the idea of using an if statement like this for each nav item and each featured image:
<xsl:if test="$currentPage/showInNewsSlider = '1'">
I added the correct property to the corresponding doc type "featured article" and came into some issues.
I've got the feeling I'm on the right track, just having a hard time getting the code to function!
Any ideas?
Jordy