Quantcast
Channel: ActiveTopics
Viewing all articles
Browse latest Browse all 72689

Custom Jquery Slider

$
0
0

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 &gt; 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}&amp;width=550&amp;" alt="{@nodeName}" />
            </xsl:if>
            <div class="news-item-brief">
              <span>
                <xsl:value-of select="featuredBrief" />
              </span>
                <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>
          <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


Viewing all articles
Browse latest Browse all 72689

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>