Pause / Play buttons for cycle-plugin on my wordpress homepage

admin

Administrator
Staff member
I've tried adding a manual "Pause" and "play" button to my frontpage slider (It uses cycle-plugin) is what I'm using. I've tried refering to the cycle plugin examples to get mine working, but my lack of java / jquery knowledge has me slightly puzzled.

Here is the link to the cycle plugin on what I want to achieve:
HTTP ->> jquery.malsup.com/cycle/pause.html (spam filtering won't let me post this URL for some reason..????)
- Instead of using an input button, I am using a div with ID's of the following:

Code:
    <a href="#" id="slider_pause"></a>
    <a href="#" id="slider_resume"></a>

From what I understands its not as easy as adding "Next" and "prev" buttons as the cycle plugin doesn't except div ID's as an option for advancing and pausing the slideshow.

For the pause button the javascript in question is as follows (taken from the cycle-plugin website):

Code:
$('#pauseButton').click(function() { 
$('#s1').cycle('pause'); 
});

Obviously I would change #pauseButton to #slider_pause. What would I change #s1 to?

The wordpress them I am using currently has the following setup to make the cycle-plugin work. Where would I add it at this point?

Here is the currenty wordpress theme file code that integrates the cycle=plugin:

Code:
    <?php 
    $jcycle_timeout = get_option('ka_jcycle_timeout');
    $jcycle_pause_hover = get_option('ka_jcycle_pause_hover');
    if ($jcycle_pause_hover == "true") {$jcycle_pause_hover_results = '1';}
    else {$jcycle_pause_hover_results = '0';}
    echo '<script type="text/javascript">
    //<![CDATA[
    TTjquery(window).load(function() {
    TTjquery(\'.home-banner-wrap ul\').css("background-image", "none");
    TTjquery(\'.jqslider\').css("display", "block");
    TTjquery(\'.big-banner #main .main-area\').css("padding-top", "16px");
    TTjquery(\'.home-banner-wrap ul\').after(\'<div class="jquery-pager">
     </div>\').cycle({
    fx: \'fade\',
    timeout: '.$jcycle_timeout.',
    height: \'auto\',
    pause: '.$jcycle_pause_hover_results.',
    pager: \'.jquery-pager\',
    cleartypeNoBg: true,
    prev:   \'#prev1\', 
    next:   \'#next1\' 
    });
    });
    //]]>
    </script>';
    ?>

Unfortunately its on a localhost development at the moment and I don't have the ability to upload it ATM