CODEWITHSUNDEEP
jquerypluginscycle
olo
olo

Reputation: 5271

JQuery cycle plugin - buttons

I am new to JQuery. I am using JQuery cycle plugin to create a feature-box. the problem is that, I cannot figure out how to replace those 1,2,3,4 navigation to my "clickable" block buttons.

you can copy and paste all code to run it from this link: http://htmledit.squarefree.com

Really appreciate if someone could help with this Many thanks

here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
        var parentLI = $(this).parent('li');
        var controller = $(this);

var $featured_content = $('#slideshow');
if ($featured_content.length) {
    $('#slideshow').cycle({ 
    timeout: 0,         
    speed: 500,
    cleartypeNoBg: true,
    cleartype: true, 
    pager: '#controller',
    fx: 'fade',
}); 
}


$('.controller').click(function(event){
        var parentLI = $(this).parent('li');
        var controller = $(this);
        //  clickable


        if (parentLI.hasClass('active')) {
            return false;
        }


    $('.active').removeClass('active');
        parentLI.addClass('active');
        event.preventDefault();
});


});

</script>
    <style type="text/css">
ol,ul{list-style:none;
    }
#slideshow {
    float:left;
    width:962px;
    height:308px;
    border-bottom:#000 1px solid;
}
#slide {
    float:left;
    width:962px;
    height:308px;
    background: #FFF;
}
.imags1 {
    background: green;
no-repeat;
    height:290px;
    margin:20px auto;
}
.imags2 {
    background: red;
no-repeat;
    height:290px;
    margin:20px auto;
}
.imags3 {
    background: yellow;
no-repeat;
    height:290px;
    margin:20px auto;
}
.imags4 {
    background: purple;
no-repeat;
    height:290px;
    margin:20px auto;
}
#controller {
    float:left;
    width:962px;
    height:179px;
    border-top:1px solid #000;
}
.controller {
    font-size:11px;
    ;
}
#controller h3 {
    font-size:13px;
    font-weight:bold;
}
#controller .active h1 {
    color: #DD9A40;
}
#controller ul {
    padding:0;
    margin:0;
}
#controller li.active {
    background: #6690c5;
}

#controller ul li {
    float:left;
    cursor: pointer;
}
#controller ul li .controller {
    float:left;
    width:191px;
    height:160px;
    padding: 20px 24px 0;
    border-left:1px solid #000;
}
</style>
    </head>

    <body>
    <div id="slideshow">
      <div id="slide">
        <div class="imags1"> </div> </div>
      <div id="slide">
        <div class="imags2"> </div> </div>
          <div id="slide">
        <div class="imags3"> </div> </div>
          <div id="slide">
        <div class="imags4"> </div> </div>
      </div>
      <div id="controller">
        <ul>
          <li class="active">
            <div class="controller">
              <h1>hello 1</h1>

            </div>
          </li>
          <li >
            <div class="controller">
              <h1>hello 2</h1>

            </div>
          </li>
          <li >
            <div class="controller">
              <h1>hello 3</h1>


            </div>
          </li>
          <li>
            <div class="controller">
              <h1>Hello 4</h1>


            </div>
          </li>
        </ul>
      </div>
    </div>
</body>
</html>

Upvotes: 1

Views: 217

Answers (1)

The Alpha
The Alpha

Reputation: 146191

In your cycle plugin you have an option pager: '#controller', it tells the plugin to insert pagination/numbers in to your controller div. if you create another div (with style) in you page and change the pager: '#controller' option with your new div id then it will be placed in that div. Now it depends on you how you style your div and where you place it within your html. For example you can create a new div for numbers

<style>
    #pagination{margin:auto;width:100px;height:15px;} 
    #pagination a{color:green;border:solid red 1px;}  
</style>
<div id='pagination'></div>

Place your div where you want those numbers to be appeared and then change the cycle plugin

pager: '#pagination'

See the change, you will get it.

Upvotes: 1

Related Questions