Image rotation does not work correctly in Chrome

5

I'm trying to use a function in jQuery, and it works fine in Firefox but in Chrome it just does not start, it stalls in the first image and it does not go to the rest.

Could someone give me a light on how do I make it work in Chrome, too?

Follow my code jQuery :

var intervalId;
var slidetime = 3500; // milliseconds between automatic transitions

$(document).ready(function() {  

  // Comment out this line to disable auto-play
    intervalID = setInterval(cycleImage, slidetime);

    $(".main_image .desc").show(); // Show Banner
    $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity

    // Click and Hover events for thumbnail list
    $(".image_thumb ul li:first").addClass('active'); 
    $(".image_thumb ul li").click(function(){ 
        // Set Variables
        var imgAlt = $(this).find('img').attr("alt"); //  Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
        var imgDesc = $(this).find('.block').html();    //  Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height();   // Calculate height of block    

        if ($(this).is(".active")) {  // If it's already active, then...
            return false; // Don't click through
        } else {
            // Animate the Teaser               
            $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
                $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 );
                $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
            });
        }

        $(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
        $(this).addClass('active');  // add class of 'active' on this list only
        return false;

    }) .hover(function(){
        $(this).addClass('hover');
        }, function() {
        $(this).removeClass('hover');
    });

    // Toggle Teaser
    $("a.collapse").click(function(){
        $(".main_image .block").slideToggle();
        $("a.collapse").toggleClass("show");
    });

    // Function to autoplay cycling of images
    // Source: http://stackoverflow.com/a/9259171/477958
    function cycleImage(){
    var onLastLi = $(".image_thumb ul li:last").hasClass("active");       
    var currentImage = $(".image_thumb ul li.active");


    if(onLastLi){
      var nextImage = $(".image_thumb ul li:first");
    } else {
      var nextImage = $(".image_thumb ul li.active").next();
    }

    $(currentImage).removeClass("active");
    $(nextImage).addClass("active");

        // Duplicate code for animation
        var imgAlt = $(nextImage).find('img').attr("alt");
        var imgTitle = $(nextImage).find('a').attr("href");
        var imgDesc = $(nextImage).find('.block').html();
        var imgDescHeight = $(".main_image").find('.block').height();

        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
      $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
      $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
        });
  };

});// Close Function

Html:

<div id="main" class="container">
<div class="main_image">
<img src="<?php bloginfo('template_url') ?>/img/load.gif" alt="- banner1" />
<div class="desc">
<div class="block">
</div>
</div>
    </div>

    <div class="image_thumb">
        <ul>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("posts_per_page=4&category_name=novidades&paged=$paged"); ?>
<?php while (have_posts()) : the_post(); ?>         
            <li>
<a href=" <?php
//Pega as imagens anexadas desse post
$args = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'image',
    'numberposts' => -1,
        'order' => 'ASC',
    'post_status' => null,
    'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
    foreach ($attachments as $attachment) {
        $img = wp_get_attachment_thumb_url( $attachment->ID );
                break;
        }
}
echo $img; 
?>"></a>
<div class="block">
<h2><a target="_self" href="#" OnClick="javascript:window.document.location=('<?php the_permalink() ?>');" rel="bookmark" ><?php limit_title(28); ?></a></h2>
<small><?php ob_start(); the_excerpt(); echo dp_clean(ob_get_clean(), 110); ?> [...]</small>
</div>
 </li>
<?php endwhile; ?>
<?php wp_reset_query();?>            
        </ul>
    </div>
</div>
    
asked by anonymous 05.05.2015 / 01:58

1 answer

1

Your response is here: link

and was answered in its own source code (this one in comment) look at your line code there:

// Source: https://stackoverflow.com/a/9259171/477958

and follow this link link there is an example code that I tested here in chrome and resolved

Note: When there are incompatibility issues between browsers it is usually some CSS property that only exists in a particular browser eg:

.ui-button { -moz-user-select: none; } /* PARA QUE O TEXTO DO BOTAO NAO SEJA SELECIONADO COM O MOUSE*/
    
05.06.2015 / 20:32