Support » Plugin: WP-Cycle » [Plugin: WP-Cycle] How do I Add a Arrow Navigation

  • Hey i’m using the WP-Cylce Plugin but i want to know how can i add a navigation above the arrow.

    If you look at JMonae.com you will notice that she has the arrow going left and right with the circle in the middle. How do i add that to the cycle.

Viewing 13 replies - 1 through 13 (of 13 total)
  • HELP PLEASE!!!!!!!!

    bump. wow, i gotta tell you, this wordpress plug-in support man…

    Edit wp-cycle.php at the bottom of the file you will find the code below and you need to add:
    next: ‘#next’,
    prev: ‘#prev’,

    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
    	    fx: '<?php echo $wp_cycle_settings['effect']; ?>',
    	    timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
    	    speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
    	    pause: 1,
                next: '#next',
                prev: '#prev',
    	    fit: 1
    	});
    });
    </script>

    This plugin is based in JQuery Cycle Plugin ( http://jquery.malsup.com/cycle/) you should be able to add anything extra shown there.

    any idea how to add a pager nav? 1 2 3?

    @danmichel add pager: ‘#nav’ as i comment above. Please refer to http://jquery.malsup.com/cycle for more examples and functionalities 🙂

    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
    	    fx: '<?php echo $wp_cycle_settings['effect']; ?>',
    	    timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
    	    speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
    	    pause: 1,
                pager: '#nav,
    	    fit: 1
    	});
    });
    </script>

    ?
    how then do i display the underneath?

    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
    	    fx: '<?php echo $wp_cycle_settings['effect']; ?>',
    	    timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
    	    speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
    	    pause: 1,
                pager: '#nav',
    	    fit: 1
    	});
    });
    </script>

    You missed a

    then add to your theme:

    <?php wp_cycle(); ?>
    <div id="nav"></div>

    as for the other example you must add this to your theme:

    <?php wp_cycle(); ?>
        <a id="prev" href="#">Prev</a>
        <a id="next" href="#">Next</a>

    hope that helped

    thanks bro! i spent hours on IRC trying to get that

    one really quick question would be how to use javascript: void(0) instead of # . i guess that more SEO friendly?

    oh, bro, and while you’re here, i set up a:active and a:hover colors in the css, but it’s not highlighting the active slide with my active color. how do i do that?

    glad it worked 🙂

    As far as i know javascript: void(0) is used to avoid the page scroll to the top when links have empty anchors (#), the plugin is taking care of that, there is no scrolling to the top when links are clicked.

    About SEO i don’t know # seems fine vs that line of js 😛

    ok, cool. any ideas about the other issues? i really need to take this opportunity for support because most of the threads here go unanswered

    TNK, you are a genius! Thanks very much. Didn’t know those arrows were possible with cycle. I love WordPress, Whoo hoo!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Plugin: WP-Cycle] How do I Add a Arrow Navigation’ is closed to new replies.