Copied to clipboard

Flag this post as spam?

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


  • Jordy Vialoux 73 posts 103 karma points
    Aug 09, 2012 @ 02:02
    Jordy Vialoux
    0

    Custom Jquery Slider

    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

  • Jordy Vialoux 73 posts 103 karma points
    Aug 09, 2012 @ 02:05
    Jordy Vialoux
    0

    Here is the correct js fiddle link: here

  • Jordy Vialoux 73 posts 103 karma points
    Aug 10, 2012 @ 02:08
    Jordy Vialoux
    0

    Can anyone help me on this? 

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Aug 10, 2012 @ 05:07
    Tom Fulton
    0

    Hi Jordy,

    If I understand you have everything working but want to make sure you limit your XSLT to only showing 4 articles.

    The best way is probably to use Multi Node Tree Picker from uComponents (or in the core if you're using v4.8+).  With this you can give your editors a nice interface to "pick" articles and can also set minimum and maximum requirements (ie min 4 max 4).

    You can also add a limit in your XSLT, but I think the above is the best solution from a editors perspective.

    -Tom

  • Jordy Vialoux 73 posts 103 karma points
    Aug 10, 2012 @ 05:12
    Jordy Vialoux
    0

    Hi Tom,

    Thanks for your post - really appreciate it! 

    Will the solution you've provided accommodate umbraco version 4.7.2? That is the current version the site is running.

    If not - would you have an alternative?

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Aug 10, 2012 @ 05:34
    Tom Fulton
    0

    Yes, if you're using 4.7.2 just install the  uComponents package to use MNTP.  Some of the uComponents datatypes were migrated into the core in v4.8 which is why I mentioned that.

    -Tom

Please Sign in or register to post replies

Write your reply to:

Draft