[Theme: Twenty Eleven] auto-slide

Hi,

Seems to be working in Safari 5 and Firefox 5, but haven’t tested in IE or Chrome as yet.

Johan, did you get the longer fade transitions you wanted? I would love to know how to do it if you have…

Cheers,

Tracy

@realepicurean I made the jquery mod and the slider is working beautifully in Chrome, FF etc but I am having the image width display issue. (IE9 as well as IE 7 and 8.)

I’ve added the statement and var declaration to header.php but I’m not sure where and how to to insert the if/then statement into your childtheme showcase template – can you help?

Thanks for any assistance!

Hi!

Wosley, it goes in the showcase.js file…let me know if you need help with that.

Strangeshe, it helps but doesn’t fix. It will show one image almost OK but I had to disable the slider…

Hi folks
Different issue… My second featured post (“featured-post-2”) is mostly stuck below the area of the featured posts section. I can see a sliver of the top of it appear. Any ideas? It’s supposed to slide up, yes? It just isn’t moving. The 6 lines of -moz-transition stuff is present and untouched in my child style.css file.
I implemented the awesome auto thing posted above and can tell it’ll work, by the way.

Hi,
Finally found where and how to do. This is in shwocase.php, in section recent-posts. Below is the orginal code. It displays the most recent post (not featured) in excerpt mode, and the others recents posts in title mode.

// The first Recent post is displayed normally
if ( $recent->have_posts() ) : $recent->the_post();
        global $more;<code></code>
	$more = 0;
	get_template_part( 'content', get_post_format() );
	echo '<ol class="other-recent-posts">';
endif;

// For all other recent posts, just display title and comment status.
while ( $recent->have_posts() ) : $recent->the_post(); ?>
	<li class="entry-title">
	<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
	<span class="comments-link">
		<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentyeleven' ) . '</span>', __( '<b>1</b> Reply', 'twentyeleven' ), __( '<b>%</b> Replies', 'twentyeleven' ) ); ?>
	</span>
	</li>
	<?php
endwhile;

In order to display all recents posts in excerpt mode, I just have replaced the if … next by a while … endwhile in the first part of the code, and commented all the second part.

while ( $recent->have_posts() ) : $recent->the_post();
        global $more;<code></code>
	$more = 0;
	get_template_part( 'content', get_post_format() );
	echo '<ol class="other-recent-posts">';
endwhile;

And it works fine so.

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 (http://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);

Hi,
It works perfectly but doesn’t loop – it gets to the end of the featured posts, then doesn’t show the first one again, instead continuing to show the final featured post image.

Any ideas?