jQuery Cycle Plugin dynamic function

Question

Trying to make this function dynamic instead of static.

This was the original code which works

$('#goto1').click(function(e) {
    e.preventDefault();
    $('#slider').cycle(1);
});

Here is the dynamic function (doesn't work). The alert outputs the correct id but the slider doesn't cycle.

$('.cycle_goto').live('click', function(e) {
    e.preventDefault();
    var cycle_id = $(this).attr('id').substr(4);
    alert ('##'+cycle_id+'##');
    $('#slider').cycle(cycle_id);
});

The HTML is as follows:

<div id="slider">
    <img class="slide" src="<?=FE_URL;?>images/slide1.jpg" style="position: relative !important;" alt="Slide 1.">
    <img class="slide" src="<?=FE_URL;?>images/slide2.jpg" alt="Slide 2">
    <img class="slide" src="<?=FE_URL;?>images/slide3.jpg" alt="Slide 3">
</div>
<div class="slider_nav">
    <ul id="slider_nav_ul">
        <li><a class="cycle_goto" id="goto1" href="#">Hotel &amp; Residence<span class="arrow"><!--  --></span></a></li>
        <li><a class="cycle_goto" id="goto2" href="#">Yacht Charter<span class="arrow"><!--  --></span></a></li>
        <li><a class="cycle_goto" id="goto3" href="#">Properties<span class="arrow"><!--  --></span></a></li>
    </ul>
</div>

EDIT

Got it working by converting the element id to an integer with the following code:

$('.cycle_goto').live('click', function(e) {
    e.preventDefault();
    var myString = $(this).attr('id').substr(4);
    var myInteger;
    myInteger = parseInt(myString);
    var cycle_id = myInteger;
    $('#slider').cycle(cycle_id);
});

Is it cycling when you call the same dynamic function with cycle_id=1 always?. or some static value inside it?. why don't you give the html part as well. — NT_, May 03 '12 at 11:46

NT_ · Accepted Answer · 2012-05-03T12:17:04.283

You've used $('#slider').cycle(1);is invalid logically.

Syntax is $('#slideshow').cycle('command'); and therefore you can't choose to go to an element.

Edit:

You can choose to go to an element or select a group of elements by changing the option in the API :

slideExpr: null, // expression for selecting slides (if something other than all children is required)

E.g: $('#slider').cycle({ slideExpr: $('#slider .child') });

jQuery Cycle Plugin dynamic function

1 Answers1