Home/ Questions/Q 8588889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T22:54:49+00:00

I’m learning Jquery and having some little problem with a piece of code… Here

  • 0

I’m learning Jquery and having some little problem with a piece of code…
Here it is:

$('.product-box .thumb a').click(function(event) {
    event.preventDefault();
    src = $(this).find('img').attr('src')
    $('.products .product-box .image img.principal').fadeOut('fast', function() {
        $('.products .product-box .image img.principal').attr('src', src);
        $('.products .product-box .image img.principal').fadeIn('fast');
    });
    $('.products .product-box .zoom a.principal').attr('href', src);
});

And here is the HTML:

  <div class="product-box">
    <div class="image">
      <img src="<?php echo $FOTO; ?>" class="principal" alt="<?php echo $NOME; ?>">
      <div class="zoom"><a class="fancybox lupa principal"  rel="group" href="<?php echo $FOTO; ?>">ampliar</a></div>

      <div class="thumb">
        <a href="#"><img src="http://fernandonagao.com.br/img/logo.png" alt="<?php echo $NOME; ?>"></a>
        <a href="#"><img src="<?php echo $FOTO; ?>" alt="<?php echo $NOME; ?>"></a>
        <a href="#"><img src="<?php echo $FOTO; ?>" alt="<?php echo $NOME; ?>"></a>
      </div>

    </div>
    <div class="desc-prod">
      <h1><?php echo $NOME; ?></h1>
      <p>
        <?php echo $DESC_PRODUTO; ?>
      </p>
      <span><!-- R$ --> <?php echo $VALOR; ?></span>
      <!--<span>Cores Disponíveis:</span>
      <div class="color" style="background-color:#dc5f1b"></div><div class="color" style="background-color:#89ca06"></div><div class="color" style="background-color:#d3bb8c"></div><div class="color" style="background-color:#ce925a"></div>-->
      <span class="voltar"><a href="produtos.php?categoria=<?php echo $categoria; ?>">< Voltar às Categorias</a></span>
    </div><!-- desc-prod -->
  </div><!-- product-box -->

So, I want to fade a image on the product, put the src in the right place as you can see here everything goes fine, except that the page act with a link behavior, and focus the window on the top, and I don’t know why. First I tried the same code without the link, just with the images, and the same thing happened. Some ideas?

Thanks!!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The navigation is prevented, but you fade out the image, which eventually hides it from the page. When the area of the image is visually removed, the page will automatically scroll to the top, because the page becomes less high. After that you fade in the new image, but the necessary scrolling has already happened.

    What you want is wrapping the image in a container (e.g. a <div>) with a fixed size, so that the container keeps its size. That way, no scrolling will happen, because the container keeps taking up space even if the image inside is hidden. It looks like you have applied padding to the image, though. You’d be best off moving this to the container as well, so that the padding is also persistent during the transition.

    • 0