CSS: Providing seven essential vitamins and minerals since 1996.

Have a steaming hot, delicious slice of Standards.

jQuery Slideshow Crossfade Addendum

December 21, 2009 by Richard

For the handful of folks wanting to see my jQuery slideshow with a crossfade effect, the following code includes the necessary modifications so that at the moment one slide begins to fade out the next begins to fade in.


var $$ = $.fn;

$$.extend({
  SplitID : function()
  {
    return this.attr('id').split('-').pop();
  },

  Slideshow : {
    Ready : function()
    {
      $('div.tmpSlideshowControl')
        .hover(
          function() {
            $(this).addClass('tmpSlideshowControlOn');
          },
          function() {
            $(this).removeClass('tmpSlideshowControlOn');
          }
        )
        .click(
          function() {
            $$.Slideshow.Interrupted = true;

            $('div.tmpSlide').hide();
            $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

            $('div#tmpSlide-' + $(this).SplitID()).show()
            $(this).addClass('tmpSlideshowControlActive');
            
            $$.Slideshow.Counter = parseInt($(this).SplitID());
            setTimeout('$$.Slideshow.Resume();', 5000); // Resume after 5 seconds  
          }
        );

      this.Counter = 1;
      this.Interrupted = false;

      this.Transition();
    },

    Resume : function()
    {
      this.Interrupted = false;  
      this.Transition();      
    },

    Transition : function()
    {
      if (this.Interrupted) {
        return;
      }

      this.Last = this.Counter - 1;

      if (this.Last < 1) {
        this.Last = 3;
      }

      $('div#tmpSlide-' + this.Last).fadeOut(1000);
        
      $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn(
        1000,
        function() {
          $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
          $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
          

          $$.Slideshow.Counter++;

          if ($$.Slideshow.Counter > 3) {
            $$.Slideshow.Counter = 1;
          }

          setTimeout('$$.Slideshow.Transition();', 5000);
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $$.Slideshow.Ready();
  }
);

Comments

January 26, 2010 Dimitry says:

Hi, Thanks for the script. Great job!!! I have small problem with my h5 tag.(I set up new one for my head-title with fade-in/fade-out).Safari works well but IE (I have 7)make like the small groovy outline around the h4 tag when fade-in & out. My setting for h4 are 24px, Arial, normal. What do you think? Thanks an advance for you help. Dimitry
June 25, 2010 Emily says:

Thank you so much for this!
July 11, 2010 Boudewijn says:

Thanks for this script. It helps me a lot to learn JQuery. For me as a designer it is much more understandable than javascript and prototype. I have the following code in my site. But the fading is not working in Explorer. Do you have an explanation for this?
var $$ = $.fn; $$.extend({ SplitID : function() { return this.attr('id').split('-').pop(); }, Slideshow : { Ready : function() { $('td.thumbnail') .hover( function() { $(this).addClass('thumbnail_hover'); }, function() { $(this).removeClass('thumbnail_hover'); } ) .click( function() { $$.Slideshow.Interrupted = true; $('div.slide').fadeOut(1000); $('td.thumbnail').removeClass('thumbnail_selected'); $('div#slide-' + $(this).SplitID()).fadeIn(1000); $(this).addClass('thumbnail_selected'); $$.Slideshow.Counter = parseInt($(this).SplitID()); setTimeout('$$.Slideshow.Resume();', 10000); // Resume after 10 seconds } ); this.Counter = 1; this.Interrupted = false; this.Transition(); }, Resume : function() { this.Interrupted = false; this.Transition(); }, Transition : function() { if (this.Interrupted) { return; } this.Last = this.Counter - 1; if (this.Last < 1) { this.Last = $('div.slide').length; } $('div#slide-' + this.Last).fadeOut(1000); $('div#slide-' + $$.Slideshow.Counter).fadeIn(1000, function() { $('td#thumbnail-' + $$.Slideshow.Last).removeClass('thumbnail_selected'); $('td#thumbnail-' + $$.Slideshow.Counter).addClass('thumbnail_selected'); $$.Slideshow.Counter++; if ($$.Slideshow.Counter > $('div.slide').length) { $$.Slideshow.Counter = 1; } setTimeout('$$.Slideshow.Transition();', 3000); } ); } } }); $(document).ready( function() { $$.Slideshow.Ready(); } );
July 13, 2010 Brad says:

Hi, Boudewijn ... I noticed that you have this working. I'm having some trouble on my site, when the page loads, the slideshow does not begin. Any thoughts on why this is happening? I've copied the js exactly as it appears in the tutorial as well as the css and html. Thanks!
July 14, 2010 Boudewijn says:

Hi Brad. I'm not a pro but the most common problem i can think of: have you put the jquery.js in the right folder and call it before you call the slideshow? Maybe you can post a link to your site. I hope Richard will answer our questions!
August 8, 2010 Boudewijn says:

My question about the fading in IE is solved! Now I have a question about a play/pause button. The code i made works fine untill you click a thumbnail. When a you click on a thumbnail and the slideshow stops, After that, when clicking the play/pause button the slideshow starts at slide number 1. I tried to do something with parseInt($(this).SplitID()); Can you help me with this?
var $$ = $.fn; $$.extend({ SplitID : function() { return this.attr('id').split('-').pop(); }, Slideshow : { Ready : function() { $('td.thumbnail') .hover( function() { $(this).addClass('thumbnail_hover'); }, function() { $(this).removeClass('thumbnail_hover'); } ) .click( function() { $$.Slideshow.Interrupted = true; $('div.slide').fadeOut(1000); $('td.thumbnail').removeClass('thumbnail_selected'); $('div#slide-' + $(this).SplitID()).fadeIn(1000); $(this).addClass('thumbnail_selected'); $('img.playPauseButton').attr('src', 'img/play.png'); //document.write ( parseInt($(this).SplitID()) ); // $$.Slideshow.Counter = parseInt($(this).SplitID()); // $$.Slideshow.Resume(); } ); $('img.playPauseButton').click ( function() { if ($$.Slideshow.Interrupted == true) { $(this).attr('src', 'img/pause.png'); $$.Slideshow.Resume(); } else { $(this).attr('src', 'img/play.png'); $$.Slideshow.Interrupted = true; } } ); this.Counter = 1; this.Interrupted = false; this.Transition(); }, Resume : function() { this.Interrupted = false; this.Transition(); }, Transition : function() { if (this.Interrupted) { return; } this.Last = this.Counter - 1; if (this.Last < 1) { this.Last = $('div.slide').length; } $('div#slide-' + this.Last).fadeOut(1000); $('div#slide-' + $$.Slideshow.Counter).fadeIn(1000, function() { $('td#thumbnail-' + $$.Slideshow.Last).removeClass('thumbnail_selected'); $('td#thumbnail-' + $$.Slideshow.Counter).addClass('thumbnail_selected'); $$.Slideshow.Counter++; if ($$.Slideshow.Counter > $('div.slide').length) { $$.Slideshow.Counter = 1; } setTimeout('$$.Slideshow.Transition();', 3000); } ); } } }); $(document).ready( function() { $$.Slideshow.Ready(); } );
August 8, 2010 Greg Smith says:

Thanks for posting this Richard. This is a great little slideshow. I have it working a site I'm building. I've used the newest version here, with the 'Crossfade Addendum.' The only thing that seems to go haywire is when I click rapidly on the navigation numbers. As with Flash animations with user interactivity, when testing, I always take the approach "works great, now let me see if I can break it." And when I click the nav buttons in this slideshow very quickly, when it starts up again, my impression is that it's doing two things: 1) photos are starting again, correctly, after the pause, starting with the last one selected. 2) numbers (navigation), are also starting again, after the pause, but it feels like EACH number I clicked on paused and started from THAT point. So if I clicked three of the numbers very quickly, EACH one paused, then went on to the next one, making it look like the animation (according to the ON states of the nav buttons) is starting up again in three places. That's the best I can explain it. Here it is, on the site I'm building: http://idonatepro.com/2010/ Thanks again for sharing this slideshow! GS
October 20, 2010 Sean Boone says:

Are you going to post fixes to this at all? This is buggy when clicking through slides, should not be used for production.
November 18, 2010 Boudewijn says:

@sean boone, It is not buggy at all! Maybe you made it buggy. I use this code and it is very usefull if you have the intension to learn a bit.

Name:Required
Email:Required, but won't be published with your comment.
Website:Not Required
Comment:	Simple HTML is allowed: <code>, <b>, <i>, <u>, <var>, <strong>, <em>, <blockquote>, <ul>, <ol>, <li>, <p> (no attributes). All spacing and line breaks in your comment will be preserved.
What Year is it?
Remember My Information: