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

Question

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

Navigation

#1 by (7 votes)
#2 by (-1 votes)

2

Well, I need a link in the image and when I did, there is an error in my fade effect made with Jquery. I believe the error is in the misuse of next () . This fade will only work if the active class is added to img and not to the link! But by some logic the next() see the 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>
...

jquery css

asked by anonymous 08.07.2015 / 21:39

2 answers

-1

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

So your code addClass('active') will not be reached, because .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 review your logic, and good luck!

08.07.2015 / 22:15

"No value specified for parameter 1" when executing PreparedStatement Go through string with PHP

score 7 · Accepted Answer

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

You should locate the image that is within the link by passing the DOM element to the $next variable.

See example on 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><divid="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><ahref="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+3"/></a><ahref="http://localhost/#/" style="display: inline; z-index: 1;">
    <img src="http://placehold.it/253x163/333/FFF/&text=Zuul+4" />
</a>

</div>