Devon

Forum Replies Created

Viewing 5 replies - 1 through 5 (of 5 total)

  • 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

    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 );

    Hmm, I didn’t have time to do rigorous testing. I only had two images setup and it worked fine, looped as it should have.

    I’ll look into it. What OS/Browser’s and versions are you experiencing this in?

    Update: Just noticed a bug in the previous file I attached which caused it to not function properly in FireFox. I’ve added some error checking so that it’s more stable across multiple browsers.

    // Author: Devon Zara (https://devonzara.com)
// Date: Dec. 11th, 2011
// Description: Rewritten 'showcase.js' for the 'twentyeleven'
// WordPress theme.
//
// 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

( function( $ )
{
	$( document ).ready( function()
	{
		// Automatic transitioning
		var fadeshow = true;
		// Time between transitions
		var delay = 3000;
		// Length of transition
		var speed = 1000;

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

		// 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 );
			e.preventDefault();
		});

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

			// Stop the timer
			if( fadeshow )
				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 ) ) {
					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' );
				}

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

				// Get the previous slide.
				var prev = $( hash ).prev();

				// If we're at :first, the previous slide was :last.
				// However, our buttons are the :last child so we'll use them
				// as a starting point and then crawl to the previous sibling.
				prev = ( isNull( prev ) ) ? $( '.feature-slider' ).prev() : prev;

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

		function startTimer()
		{
			if( fadeshow )
				timer = setTimeout( transition, delay );
			busy = false;
		}

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

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

    The reason it looks like there is a fading transition is because there already is one. However, it’s not being done by jQuery or any other JavaScript, it’s being done with CSS3.

    .featured-posts section.featured-post {
	-webkit-transition-duration: 200ms;
	-webkit-transition-property: opacity, visibility;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 200ms;
	-moz-transition-property: opacity, visibility;
	-moz-transition-timing-function: ease;
}

    Change the 200ms to your desired duration. If you don’t want to rely on CSS3 and would rather use jQuery, I’ve written a new showcase.js that you may use.

    Enjoy. ??

    // Author: Devon Zara (https://devonzara.com)
// Date: Dec. 11th, 2011
// Description: Rewritten 'showcase.js' for the 'twentyeleven'
// WordPress theme.
//
// 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

(function($)
{
	$(document).ready( function()
	{
		// Automatic transitioning
		var fadeshow = true;
		// Time between transitions
		var delay = 3000;
		// Length of transition
		var speed = 1000;

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

		// 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[0], this.hash );
			e.preventDefault();
		});

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

			// Stop the timer
			if( fadeshow )
				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( typeof target == 'undefined' ) {
					target = $( '.feature-slider a.active' ).parent().next().children( 'a:first' );

					// Was there a next sibling? If not, go to the first.
					target = ( typeof target[0] == 'undefined' ) ? $( '.feature-slider li:first a:first' ) : target;
					hash = target.attr( 'href' );
				}

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

				// Get the previous slide.
				var prev = $( hash ).prev();

				// If we're at :first, the previous slide was :last.
				// However, our buttons are the :last child so we'll use them
				// as a starting point and then crawl to the previous sibling.
				prev = ( typeof prev[0] == 'undefined' ) ? $( '.feature-slider' ).prev() : prev;

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

		function startTimer()
		{
			if( fadeshow )
				timer = setTimeout( transition, delay );
			busy = false;
		}

		startTimer();
	});
})(jQuery);
Viewing 5 replies - 1 through 5 (of 5 total)