Problem z regularnością 'rotate' w sliderze


(Atac3) #1

Stworzyłem div ze sliderem ostatnich newsów dodanych na stronie. Bazowałem na tym tutorialu

Problem polega na tym, że czas wyświetlania poszczególnych wpisów jest nieregularny.. jedne wyświetlają się ok. 20 sekund, a drugie np. 3 sekundy

  • <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array('posts_per_page' => 1,'paged' => $paged); query_posts($args); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  • <?php if ( has_post_thumbnail() ) { the_post_thumbnail('news_small'); } ?><?php the_title(); ?><?php endwhile; ?><?php endif; ?><?php wp_reset_query(); ?> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array('posts_per_page' => 1,'offset' => 1, 'paged' => $paged); query_posts($args); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  • <?php if ( has_post_thumbnail() ) { the_post_thumbnail('news_small'); } ?><?php the_title(); ?><?php endwhile; ?><?php endif; ?><?php wp_reset_query(); ?> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array('posts_per_page' => 1,'offset' => 2, 'paged' => $paged); query_posts($args); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  • <?php if ( has_post_thumbnail() ) { the_post_thumbnail('news_small'); } ?><?php the_title(); ?><?php endwhile; ?><?php endif; ?><?php wp_reset_query(); ?> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array('posts_per_page' => 1,'offset' => 3, 'paged' => $paged); query_posts($args); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  • <?php if ( has_post_thumbnail() ) { the_post_thumbnail('news_small'); } ?><?php the_title(); ?><?php endwhile; ?><?php endif; ?><?php wp_reset_query(); ?>
    <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array('posts_per_page' => 1,'paged' => $paged); query_posts($args); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <?php if ( has_post_thumbnail() ) { the_post_thumbnail('news'); } ?>

<?php the_title(); ?>

Dodano: <?php the_time('j F Y'); ?>

<?php echo excerpt(30); ?> Czytaj więcej...

<?php endwhile; ?><?php endif; ?><?php wp_reset_query(); ?> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array('posts_per_page' => 1,'offset' => 1, 'paged' => $paged); query_posts($args); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('news'); } ?>

<?php the_title(); ?>

Dodano: <?php the_time('j F Y'); ?>

<?php echo excerpt(30); ?> Czytaj więcej...

<?php endwhile; ?><?php endif; ?><?php wp_reset_query(); ?> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array('posts_per_page' => 1,'offset' => 2, 'paged' => $paged); query_posts($args); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('news'); } ?>

<?php the_title(); ?>

Dodano: <?php the_time('j F Y'); ?>

<?php echo excerpt(30); ?> Czytaj więcej...

<?php endwhile; ?><?php endif; ?><?php wp_reset_query(); ?> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array('posts_per_page' => 1,'offset' => 3, 'paged' => $paged); query_posts($args); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('news'); } ?>

<?php the_title(); ?>

Dodano: <?php the_time('j F Y'); ?>

<?php echo excerpt(30); ?> Czytaj więcej...

<?php endwhile; ?><?php endif; ?><?php wp_reset_query(); ?>
[/code] div#featured to div, w którym pokazuje się treść. On jest umieszczony w jakimś miejscu na stronie, ale to nie ma znaczenia tutaj
[code]

;(function($){


    $.extend( $.ui.tabs.prototype, {


        rotation: null,


        rotationDelay: null,


        continuing: null,


        rotate: function( ms, continuing ) {


            var self = this,


                o = this.options;




            if((ms > 1 || self.rotationDelay === null) && ms !== undefined){//only set rotationDelay if this is the first time through or if not immediately moving on from an unpause


                self.rotationDelay = ms;


            }




            if(continuing !== undefined){


                self.continuing = continuing;


            }




            var rotate = self._rotate || ( self._rotate = function( e ) {


                clearTimeout( self.rotation );


                self.rotation = setTimeout(function() {


                    var t = o.selected;


                    self.select( ++t < self.anchors.length ? t : 0 );


                }, ms );




                if ( e ) {


                    e.stopPropagation();


                }


            });




            var stop = self._unrotate || ( self._unrotate = !continuing


                ? function(e) {


                    if (e.clientX) { // in case of a true click


                        self.rotate(null);


                    }


                }


                : function( e ) {


                    t = o.selected;


                    rotate();


                });




            // start rotation


            if ( ms ) {


                this.element.bind( "tabsshow", rotate );


                this.anchors.bind( o.event + ".tabs", stop );


                rotate();


            // stop rotation


            } else {


                clearTimeout( self.rotation );


                this.element.unbind( "tabsshow", rotate );


                this.anchors.unbind( o.event + ".tabs", stop );


                delete this._rotate;


                delete this._unrotate;


            }




            //rotate immediately and then have normal rotation delay


            if(ms === 1){


                //set ms back to what it was originally set to


                ms = self.rotationDelay;


            }




            return this;


        },


        pause: function() {


            var self = this,


                o = this.options;




            self.rotate(0);


        },


        unpause: function(){


            var self = this,


                o = this.options;




            self.rotate(1, self.continuing);


        }


    });


})(jQuery);

Przygotowałem pokaz tego: http://jsfiddle.net/vbvKH/

Chodzi mi o to, żeby:

  • po kliknięciu w menu po prawej w boksie po lewej pokazywał się ten news

  • newsy zmieniały się co jakieś 10sek


(manieKMP) #2

Te 20-ki w pierwszym js'ie to milisekundy (chodzi o te części .tabs("rotate", 20, true);), żeby przejście wykonywało się co 10 sekund, przynajmniej pierwszą 20-tkę trzeba byłoby zamienić na 10000 lub podmienić skrypt na:

$(document).ready(function(){

  $("#featured").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 10000);

  $('#featured').hover(function(){

    $(this).tabs('rotate', 0, false);

    },function(){

   $(this).tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 10000);

    }

  );

});

działa na jq 1.8.3 i jq ui 1.9.2


(Atac3) #3

manieKMP , działa już zdecydowanie lepiej, ale znowu nieregularnie, na stronie pierwszy news zmienił się rzeczywiście po 10sek, ale na zmianę drugi/trzeci czekałem już z 35 sekund

zrobiłem kolejny test: http://jsfiddle.net/vbvKH/

jakie może być problem? skoro wartości są takie same nie powinno być chyba tak znacznych różnic?


(manieKMP) #4

Na pw czeka możliwe rozwiązanie problemu.

Jeśli się nie mylę, to problem leży w "rotate", którego obsługa -jak w sieci donoszą- podobno została usunięta z biblioteki jq... Jednak została stworzona oddzielna, przywracająca możliwość wykorzystania tego. Tak więc na pw możesz pobrać paczkę dwóch plików na bazie Towjego kodu (html i js) i sprawdzić, czy to będzie poprawnie działało...