WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
[closed] auto-slide (43 posts)

  1. atobias
    Member
    Posted 3 years ago #

    I would like to have the showcase template automatically slide through all the sticky posts. Where can I enable this. I am guessing it's in the showcase.js, but my jquery skills are zero...

    Can anybody tell me how I can make the slideshow automatically fade to the next post every x secs?

    http://wordpress.org/extend/themes/twentyeleven/

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

    For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

  3. gordo019
    Member
    Posted 3 years ago #

    I have the same need for my featured sticky posts to automatically rotate. My child theme is ready for this modification.

  4. mowse
    Member
    Posted 3 years ago #

    I have a child theme created and would like to know how to create the auto-slide as well. I can't find any documentation about it.

  5. nz_mitch
    Member
    Posted 3 years ago #

    Yeah, I would love the auction to automatically slide through the featured posts.

  6. archondigital
    Member
    Posted 3 years ago #

    Also using a Twenty Eleven child theme and would love to know how to animate the slides automatically

  7. Johan van der Wijk
    Member
    Posted 3 years ago #

    I have modified the showcase.js file to simulate the mouseclick that triggers the slide change.

    You can specify how long it takes for the slide to change by modifying the changeEvery variable.

    Just replace the code in /wp-content/themes/twentyeleven/js/showcase.js with the following: http://pastebin.com/s6JEthVi

  8. archondigital
    Member
    Posted 3 years ago #

    it works! thanks a lot

    on the child theme I made I modified line 18 so it would use the edited showcase.js which I uploaded into the child theme folder

    from

    wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );

    to this

    wp_enqueue_script( 'twentyeleven-showcase', get_stylesheet_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );

  9. mowse
    Member
    Posted 3 years ago #

    Brilliant, Johan and archondigital!...Your last 2 posts worked like a charm!! Thank you!!

  10. Johan van der Wijk
    Member
    Posted 3 years ago #

    Glad I could help! Now I am trying to find out how to add a fade effect on the slider.

    I have included the jQuery UI library by adding this to my theme's function file:

    function my_add_frontend_scripts() {
            wp_enqueue_script('jquery-ui-core');
    }
    add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

    And I set the duration of the transition on in showcase.js:

    $('.feature-slider a').removeClass('active', 10);

    But... It does not work. Would anyone know how to add a fade effect on the transition of the slides?

  11. mowse
    Member
    Posted 3 years ago #

    Now I am trying to find out how to add a fade effect on the slider.

    It looks like the transition is already a fade (albeit a quick one)...Are you sure there's not a number somewhere to just easily modify in the existing js?

  12. Brandon Moeller
    Member
    Posted 3 years ago #

    Thank you, Johan and Archon, for your great solution!

  13. FEU
    Member
    Posted 3 years ago #

    Hi, I've followed Johan van der Wijk 's instructions, I've changed showcase.js code in my child theme, but it doesn't work!

    After this. My "3-Featured-Posts-Slider" doesn't alternate posts automatically, and moreover the 3 circled buttons (to manually change featured posts) don't work anymore. These buttons redirect me respectively to these pages:

    http://www.mywebsite.XXX/#featured-post-1
    http://www.mywebsite.XXX/#featured-post-2
    http://www.mywebsite.XXX/#featured-post-3

    It's correct, but posts doesn't change clicking on them.

    What can i do? :/

  14. jdarias
    Member
    Posted 3 years ago #

    Thanks! It works wonderfully!!

    @FEU You have to modify showcase.php in your child theme, as adviced by archondigital.

  15. realepicurean
    Member
    Posted 3 years ago #

    I'm using this, although I tweaked the cycle time down to 5 secs, but it does work beautifully...

  16. realepicurean
    Member
    Posted 2 years ago #

    Hey guys...
    Although this does work great, there's a bug which prevents IE7 / IE8 from displaying full width featured posts. I can get around that with CSS, but not when the content slides as we're doing here.

    Is there a way to turn off the auto-slide on IE7 / IE8 browsers?

  17. realepicurean
    Member
    Posted 2 years ago #

    OK OK, so I figured this one out, added this code to header.php

    <script>
        var ie7or8 = false;
    </script>
    <!--[if IE 8]>
        <script>
            ie7or8 = true;
        </script>
    <![endif]-->
    <!--[if IE 7]>
        <script>
            ie7or8 = true;
        </script>
    <![endif]-->

    And then just made a simple if / else based on the ie7or8 variable in showcase.js

    This is probably a really sloppy way to do the code, but it works. It also highlights that the above CSS fix doesn't work properly, but I've got another support topic about that.

  18. Freelancealot
    Member
    Posted 2 years ago #

    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

  19. Freelancealot
    Member
    Posted 2 years ago #

    Hi again,

    I'm figuring something like this ...

    $(this).fadeTo("slow", 0.33);

    Has to go in the code Johan kindly posted, but where and how ... ??

    Cheers,

    Tracy

  20. woslet
    Member
    Posted 2 years ago #

    @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!

  21. strangeshe
    Member
    Posted 2 years ago #

    Thank you, @realepicurean, for the jquery mod. Going to try that shortly.

    @woslet, I haven't tried this yet, but in searching for fixes to the IE problems, came across this ticket:
    http://core.trac.wordpress.org/ticket/18024

    which provides link to patch file diff.txt:
    http://core.trac.wordpress.org/attachment/ticket/18024/diff.txt

    Does this help with the width display issue? (I'm getting ready to test it, too, but saw your post & thought I'd at least post this much so far...)

  22. realepicurean
    Member
    Posted 2 years ago #

    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...

  23. strangeshe
    Member
    Posted 2 years ago #

    Thanks, realepicurean.

    I found that disabling the autoslide did not seem to make much difference, so I've kept it active on my live site -- just have to hope visitors are twitchy enough with the mouse to accidentally reveal the images in the Featured Posts area while I hunt down a fix. Ha!

    I've posted my experiences to date at (much!) length in the other topic over here. (I apologize for wordiness. A failing of mine when trying to explain something like this problem.)

    Still hunting and hoping someone will find the answer soon...

  24. Mark
    Member
    Posted 2 years ago #

    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.

  25. Pierre73100
    Member
    Posted 2 years ago #

    Hi!
    Thanks a lot Johan and Archondigital for your tips on how to animate the slides automatically. It works fine.

    But does anybody knows how to change display of recents posts (not featured) on the second static page configurer in Settings/Reading ?

    Only first post is displayed with his intro and image. Others are only on one texte line (title). I'd like to have all recents posts not featured displayed as the first one.

    See exemple on http://www.aixlesbains.info/

    According to WP help, display of thoses posts are ruled by index.php, but I don't see what shoudl be modified in this file to have all recents posts displayed as the first.

    Below is my index.php file

    Thanks for any help or suggestion.

    [Code moderated as per the Forum Rules. Please use the pastebin]

  26. Pierre73100
    Member
    Posted 2 years ago #

    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.

  27. smaller
    Member
    Posted 2 years ago #

    Thanks for the solution to this especially Johan van der Wijk and Archondigital.

    I'm just wondering if anybody successfully got fade effects working on the showcase slider as the transitions look a bit raw without effects...

    Thanks!

  28. Devon
    Member
    Posted 2 years ago #

    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);
  29. Devon
    Member
    Posted 2 years ago #

    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 (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, 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 );
  30. realepicurean
    Member
    Posted 2 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic