Copied to clipboard

Flag this post as spam?

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


  • Sam 184 posts 209 karma points
    May 01, 2011 @ 21:33
    Sam
    0

    Slider using xslt and jQuery

    Hi everyone,

    I've been working on a slider which uses images picked in a doctype and xslt. I have been trying all day to make the slider have a text caption overlaying the image but can't seem to do it, or find a decent resource to work with. I have based my slider on soh tanakas portfolio slider http://www.sohtanaka.com/web-design/examples/image-slider/. Here is the 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:template match="/">
               <div id="main_view">
                <div id="window">  
                    <div id="image_reel">
                      <xsl:apply-templates select="$currentPage[@level = 1]/descendant-or-self::*[@isDoc]/sliderItem" />
                    </div>        
                </div>
            </div>
                  <div class="paging">
                  <a href="#" rel="1">1</a>
                  <a href="#" rel="2">2</a>
                  <a href="#" rel="3">3</a>
                </div>

      </xsl:template>
      
      
      <xsl:template match="sliderItem">
                    <a href="{umbraco.library:NiceUrl(sliderLink)}">
                      <xsl:apply-templates select="sliderImage"/>
                      </a>
    </xsl:template>
      
        
        <xsl:template match="sliderImage">
      <xsl:variable name="media" select="umbraco.library:GetMedia(., false())"/>
          <img src="/ImageGen.ashx?image={$media/umbracoFile}&amp;width=968" alt="{$media/@nodeName}" />
    </xsl:template>


    </xsl:stylesheet>

     

    and here is the jQuery:

    <script type="text/javascript">

          $(document).ready(function() {

      //Set Default State of each portfolio piece
      $(".paging").show();
      $(".paging a:first").addClass("active");
        
      //Get size of images, how many there are, then determin the size of the image reel.
      var imageWidth = $("#window").width();
      var imageSum = $("#image_reel img").size();
      var imageReelWidth = imageWidth * imageSum;
      
      //Adjust the image reel to its new size
      $("#image_reel").css({'width' : imageReelWidth});
      
      //Paging + Slider Function
      rotate = function(){  
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $("#image_reel").fadeOut(200);
        $("#image_reel").animate({left: -image_reelPosition}, 50 );
        $("#image_reel").fadeIn(400);
      };
      
      //Rotation + Timing Event
      rotateSwitch = function(){    
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
          $active = $('.paging a.active').next();
          if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
          }
          rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
      };
      
      rotateSwitch(); //Run function on launch
      
      //On Hover
      $("#image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
      }, function() {
        rotateSwitch(); //Resume rotation
      });  
      
      //On Click
      $(".paging a").click(function() {  
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
      });  
      
    });
          
      </script>

    I wanted to add another richtext property to the doctype called 'sliderCaption', add that in the xslt as:

        <xsl:template match="sliderImage">

      <xsl:variable name="media" select="umbraco.library:GetMedia(., false())"/>
          <img src="/ImageGen.ashx?image={$media/umbracoFile}&amp;width=968" alt="{$media/@nodeName}" />
    <div class="sliderCaption"><xsl:value-of select="$currentPage/sliderCaption" /></div>

    </xsl:template>

    and then modify the jQuery to show the caption (either under or overlayed - not too bothered, just need it working first!) at the same time as each image shows.

    However, I have not been able to do this, I have tried quite a few different examples and tried to modify the code but I'm getting nowhere after several hours... hence the huge post!

    If anyone knows how to do this, or can point me in the right direction, please let me know :)

    Thanks in advance.

    Sam.

     

     

     

     

     

     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    May 02, 2011 @ 07:37
    Jan Skovgaard
    0

    Hi Sam

    So the problem is that the text in the caption does not show, or is it that it does not change when the image changes?

    /Jan

  • Sam 184 posts 209 karma points
    May 02, 2011 @ 11:26
    Sam
    0

    Hi Jan,

    I can't get the caption to display at all, plus it seems wherever I put a fake caption ie <span class="caption">caption-here</span>, the first image shows fine, then the secodn, but on the third I get the (same fake) caption 3 times above the image even though the html is like so:

    <a  href="#"><image here />caption here</a><a  href="#"><image here />caption here</a><a  href="#"><image here />caption here</a>

    If I could just get the caption to display (overlaying) on each image at the bottom (position:absolute), then have the caption fade in and out with the image. If that makes sense. Possibly the jQuery needs a tweak, I don't know whether the existing code can handle the fading in/out of the text or you have to specify another function for the <span>?

    As far as the xslt:

    <xsl:value-of select="$currentPage/sliderCaption" />

    wont work as the slider is on the homepage but:

    <xsl:value-of select="sliderCaption" />

    doesn't work either. Perhaps the intial xslt is incorrect::

    <xsl:apply-templates select="$currentPage[@level = 1]/descendant-or-self::*[@isDoc]/sliderItem" />

    What does the [@level = 1] do in this situation? Does it mean start from level 1 regardless of the current page? Or list the descendants if the current page is level 1? or something else?

    I wish I had more time to learn this stuff but I do full time work which is nothing to do with computers. I have learnt everything I know so far in my own time, which makes me either a nerd or really dedicated. Or both...

    Thanks :)

    Sam.

  • Sam 184 posts 209 karma points
    May 02, 2011 @ 16:05
    Sam
    0

    After quite a long time I have gone for 'nivo slider' instead, works a charm and easily incorporates into xslt so I can add images/captions/image links via the content nodes. Thanks anyway Jan :)

    Sam.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    May 02, 2011 @ 22:49
    Jan Skovgaard
    0

    Hi Sam

    Glad to hear you got it solved by using another slider.

    The code in the first example should probably have been setup using a list to make it work properly. But you managed to find another solution before I got around to have a better look at it...so that's good :-)

    /Jan

  • Paul Blair 466 posts 731 karma points
    May 03, 2011 @ 11:59
    Paul Blair
    1

    I'm using http://malsup.com/jquery/cycle/ for most of my solutions now. It's very easy to adapt to an Umbraco environment

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    May 03, 2011 @ 22:31
    Jan Skovgaard
    0

    Yes, this is also the plugin I usually prefer. But the other scripts should be just as easy to adapt to Umbraco as this one.

    Remember that you have 100% control over the generated output. But sometimes it can just be a bit confusing to figure out where to use what etc. :-)

    /Jan

Please Sign in or register to post replies

Write your reply to:

Draft