addClass() is adding class to <a href=""> instead of <img src="">

Question

Guys , I need to put a link in the image and when I did, there is an error in my fade effect done with Jquery. I believe the error lies in the misuse of next(). This fade will only work if the class active is added to the img and not the link! But by a certain logic next() see href with the next.

<!-- JAVASCRIPT -->

<script type="text/javascript">

    function cycleImages(){
      var $active = $('#nov-ger .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#nov-ger img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
      $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 4000);
})

</script>
...


<!-- HTML-->
<div id="nov-ger">
<a href="http://localhost/#/" class="ESTÁ  INSERINDO AQUI">

<img src="http://localhost/imagem.png" class="MAS DEVERIA ESTÁ AQUI!">
</a>
</div>
...

Answer 1

Your problem is that you are running the images as if they were side by side, but in reality the images are "children" of the elements <a/>, reason your variable $next points to the <a/> instead of <img/>.

You should locate the image inside the link by passing the DOM element to the variable $next.

See example in Jsfiddle.

function cycleImages() {

    // atualmente ativo
    var $active = $('#nov-ger .active');

    /* Apanhar o próximo elemento onde para o efeito estamos:
     *  - a começar no elemento ativo;
     *  - subimos para a hiperligação
     *  - passamos para a hiperligação seguinte
     *  - descemos para a imagem
     * Se nada encontrado, vamos à primeira imagem
     */
    if ($active.parent().next().find('img').length > 0) 
        var $next = $active.parent().next().find('img');
    else
        var $next = $('#nov-ger img:first');

    // Mover o próximo elemento na pilha
    $next.css('z-index', 2);

    // Transição animada
    $active.fadeOut(1500, function () {
        $active.css('z-index', 1).show().removeClass('active');
        $next.css('z-index', 3).addClass('active'); 
    });
}

$(document).ready(function () {
    setInterval(cycleImages, 4000);
});

---

Example

function cycleImages() {

    var $active = $('#nov-ger .active');

    if ($active.parent().next().find('img').length > 0) var $next = $active.parent().next().find('img');
    else var $next = $('#nov-ger img:first');

    $next.css('z-index', 2); //move the next image up the pile

    $active.fadeOut(1500, function () { //fade out the top image
        $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
        $next.css('z-index', 3).addClass('active'); //make the next image the top one
    });
}

$(document).ready(function () {
    setInterval(cycleImages, 4000);
});

#nov-ger {
    position:relative;
}
#nov-ger img {
    z-index:1;
    width: 253px!important;
    height: 163px!important;
    position:absolute;
    right: 1px;
}
#nov-ger img.active {
    z-index:3
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="nov-ger">
<a href="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+1" class="active" />
</a>

<a href="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+2" />
</a>

<a href="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+3" />
</a>

<a href="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+4" />
</a>

</div>

Answer 2

When $active.next().length is 0, $next receives $('#nov-ger img:first').

Therefore, your code addClass('active') will not be hit, because the .fadeOut will be done under no element (after all, $active.next().length is 0):

$active.fadeOut(1500,function(){//fade out the top image
    $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
    $next.css('z-index',3).addClass('active');//make the next image the top one
});

Try to revise your logic, and good luck!