[Theme: Twenty Eleven] auto-slide

Update: Alright, I’ve identified and resolved the problem that realepicurean reported. I’ve also added a click delay which will allow you to customize the script to pause for an extended amount of time after a click event.

Additionally, I’ve added a 1-spot click queue so that if the user clicks while it is busy, it will wait until the transition is done, skip the delay, and go straight to the last item that was clicked.

Let me know if you find any other errors. ??
Enjoy!

Features:

• Automatic transitioning
• Customizable transition speed
• Customizable delay between transitions
• Anti-glitch transitioning when clicked
• 1-spot click event queue
• Customizable delay time after click event

// Author: Devon Zara (https://devonzara.com)
// Date: Dec. 11th, 2011
// Description: Rewritten 'showcase.js' for the 'twentyeleven'
// WordPress theme.
// Version: 1.0b201112120044
// ID: DZWPTEASC
//
// For the jQuery fade to function, you must remove, comment, or
// over-rule the CSS3 animations in your stylesheet,
// found next to the selectors:
// 	   .featured-posts section.featured-post
//
// NOTE: All times are in miliseconds
//       1000 miliseconds = 1 second

( function( $ )
{
	$( document ).ready( function()
	{
		// Automatic transitioning
		var useFadeshow = true;
		// Time between transitions
		var delay = 3000;
		// Length of transition
		var speed = 1000;
		// Toggle click delay
		var useClickDelay = true;
		// Delay when clicked
		var clickDelay = 5000;

		// System variables
		var timer = null;
		var busy = false;
		var wasClicked = false;
		var queue = null;

		// These next two lines do a few additional
		// resets to the CSS so that jQuery functions
		// properly.
		$( '.featured-posts section.featured-post' ).css({ display: 'none', visibility: 'visible', opacity: 1 });
		$( '.featured-posts #featured-post-1' ).show();

		$('.feature-slider a').click( function( e ) {
			if( !busy )
			{
				transition( e.target, this.hash );
				wasClicked = true;
			}
			else
			{
				queue = e.target;
			}
			e.preventDefault();
		});

		function transition( target, hash )
		{
			busy = true;

			// Stop the timer
			if( useFadeshow )
				clearTimeout( timer );

			// Do nothing if the same slide has been clicked
			if( $( '.feature-slider a.active' ).attr( 'href' ) != hash )
			{
				// Do we have a valid target?
				if( isNull( $( target ).attr( 'href' ) ) )
				{
					target = $( '.feature-slider a.active' ).parent().next().children( 'a:first' );

					// Was there a next sibling? If not, go to the first.
					target = ( isNull( target ) ) ? $( '.feature-slider li:first a:first' ) : target;
					hash = target.attr( 'href' );
				}
				else
				{
					target = $( target );
				}

				prev = $( $( '.feature-slider a.active' ).attr( 'href' ) );

				// Change the buttons
				$( '.feature-slider a.active' ).removeClass( 'active' );
				target.addClass( 'active' );

				// Begin fading...
				prev.fadeOut( speed );
				$( hash ).fadeIn( speed, function() {
					// Restart the timer
					startTimer();
				});
			}
			else
			{
				startTimer();
			}
		}

		function startTimer()
		{
			// Was this a click action and are we to wait?
			var thisDelay = ( wasClicked && useClickDelay ) ? clickDelay : delay;

			if( queue == null )
			{
				if( useFadeshow )
					timer = setTimeout( transition, thisDelay );

				// Reset system vars
				busy = false;
				wasClicked = false;
			}
			else
			{
				var target = queue;

				queue = null;
				transition( target, $( target ).attr( 'href' ) );
			}
		}

		function isNull( param )
		{
			try
			{
				return ( typeof param[0] == 'undefined' || typeof param[0] == 'undefined' || param < 1 || !param ) ? true : false;
			}
			catch( err )
			{
				return true;
			}
		}

		startTimer();
	});
})( jQuery );

Whoops, forgot about the 10-line rule for posting code.

If a mod wishes to remove my code, here is a pastebin link:
https://pastebin.com/5qy6Hcut

Thank you Devon…. Posted long ago for this enhancement request and now my Featured Posts are automatically revolving nicely. I hope your js code gets added to the Showcase Template soon. The default click-to-advance is not obvious to the casual browser.

Hi. I’ve read through this thread and can’t quite figure out all the steps needed – or at least I can’t get mine working.

I have a child theme in use with some CSS customisations and a functions.php with a mod to the header image size.

I’ve now added the final version of showcase.js ex pastebin.com (as above) but this alone does not seem to make the auto-rotate happen.

Is there another step implied in the earlier posts on this thread?

Cheers.

I repalce one thing,

// Begin fading...
		prev.fadeOut( speed );
		$( hash ).fadeIn( speed, function() {
			// Restart the timer
			startTimer();
		});

// Begin fading...
	prev.fadeOut( speed, function() {
		$( hash ).fadeIn( speed, function() {
		// Restart the timer
		startTimer();
		});
	});

OK, with careful reading I realised I needed to add a custom showcase.php to my child theme and modify the line to refer to the child showcase.js. With that done it’s still not working.

I would really appreciate someone listing the explicit steps required:

1. Copy showcase.php to child theme and mod line 18 as above.
2. Download new showcase.js from pastebin as above and put in child theme.
3. ???

Thanks,

Hi,
It should work. You need to a) have the showcase.js in the correct folder (yourchildtheme/js/showcase.js), “point” to it from your showcase.php as per the above (the key is the get_stylesheet_directory_uri() line), and that’s it.

Obviously make sure you’re actually using the child theme…

Which browser are you using?

Aha! I had the showcase.js in the theme root folder. Now I’ve moved it to a js subfolder and it’s working!. Woo!

Thanks so much for the clarification.

I wonder, is the internet the only thing in the world that solves its own problems. ??

Thank you all, especially Johan, archondigital and Devon!

@archondigital. Which file did had to edit? not the showcse.php

I followed all the instructions given by Johan and archondigital, but it doesn’t work on my site ???

I use IE9

In the modified showcase.js file is mentioned // line 28 (in line 20), but there are only 26 lines in this file

Any suggestions?

Thanks

Please post a new topic.