Image rotation does not work properly in Chrome

Asked

Viewed 206 times

5

I’m trying to use a function in jQuery, and it works well in Firefox but in Chrome it just doesn’t start, gets stuck in the first image and doesn’t go to the others.

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

Follows 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>
jquery google-chrome
  • 1

    Hello Gustavo, welcome to Sopt. I made a small edition in your post, so check if it still reflects your original intention. If you want, you can also edit the post, or even reverse the edit. In fact, it would be good if you edit the question and also include the HTML code snippet corresponding to Jquery that is giving problem, because this greatly increases the chances of receiving the answer you are looking for.

  • 2

    Opa tips welcome and already met!

  • Try decreasing the code to only focus the image rotation topic (there is even PHP in a matter of HTML/Javascript). Isolating the problem will help other people read your code, test and find the problem.

  • ta solved then @Gustavocastro ? post the answer or make your considerations.

1 answer

1

your answer is here: http://jsfiddle.net/68964/2/

and was answered in its own source code ( this in comment ) give a look ai in its code the line:

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

and follows this link https://stackoverflow.com/a/9259171/477958 there is an example code that I tested here on Chrome and solved

Observing: When there are browser incompatibility issues it is usually some CSS property that only exists in a particular browser ex: 

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

Browser other questions tagged jquery google-chrome

You are not signed in. Login or sign up in order to post.