user3453264 user3453264 - 6 months ago 83
jQuery Question

jQuery Cycle Plugin [cycle] terminating; zero elements found by selector

I am trying to do a cycle of background images on hover of a centralised logo, and have used jQuery Cycle plugin.

However, I get this error : [cycle] terminating; zero elements found by selector,

I've looked at the other page that seems to have the same problem as me, but it doesn't seem to resolve the error I have.

Any help is appreciated. Thanks. Please see code below:

HTML:

<div class="home" href="#">
<a href="#about">
<img id="logo" src="images/home/parableLogo.png"/>
</a>

<ul class="imgfill">
<li><img src="images/home/1.jpg"></li>
<li><img src="images/home/2.jpg"></li>
<li><img src="images/home/3.jpg"></li>
<li><img src="images/home/4.jpg"></li>
<li><img src="images/home/5.jpg"></li>
</ul>
</div>


JQUERY:

$(document).ready(function(){
// Cycle plugin
$('.imgfill').cycle({
fx: 'none',
speed: 1,
timeout: 70
}).cycle("pause");

// Pause & play on hover
$('#logo').hover(function(){
$(this).find('.imgfill').addClass('active').cycle('resume');
}, function(){
$(this).find('.imgfill').removeClass('active').cycle('pause');
});

});


test JQUERY following other user's solutions:

$(document).ready(function(){
// Cycle plugin
$('.home').load('.imgfill', function(){
$('.imgfill').cycle({
fx: 'none',
speed: 1,
timeout: 70
}).cycle("pause");
});


// Pause & play on hover
$('#logo').hover(function(){
$('.home').find('.imgfill').addClass('active').cycle('resume');
}, function(){
$('.home').find('.imgfill').removeClass('active').cycle('pause');
});

});

Answer

you're using a wrong selector "$(this).find('.imgfill')" you shoud use "$('.imgfill')"

$(document).ready(function(){
    // Cycle plugin
    $('.imgfill').cycle({
        fx:     'none',
        speed:   1,
        timeout: 70
    }).cycle("pause");

    // Pause & play on hover
    $('#logo').hover(function(){
        $('.imgfill').addClass('active').cycle('resume');
    }, function(){
        $('.imgfill').removeClass('active').cycle('pause');
    });

});

here is a link for a working version http://codepen.io/mozzi/pen/eZqLxr