jQuery Cycle Advanced Pager

by hellosze

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<title>JQuery Cycle Plugin - Pager Demo with Extra Link</title>

<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />

<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />

<style type="text/css">

#slideshow { margin: 20px; left: 30px }

#nav { width: 300px; margin: 15px }

#nav li { width: 50px; float: left; margin: 8px; list-style: none }

#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }

#nav li.activeSlide a { background: #88f }

#nav a:focus { outline: none; }

#nav img { border: none; display: block }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>

<script type="text/javascript">

$(function() {

    $('#slideshow').cycle({

        fx:     'turnDown',

        speed:  'fast',

        timeout: 0,

        pager:  '#nav',

        pagerAnchorBuilder: function(idx, slide) {

            // return sel string for existing anchor

            alert('#nav li:eq(' + (idx) + ') a');
            return '#nav li:eq(' + (idx) + ') a';

        }

    });



    $('#direct').click(function() {

        $('#nav li:eq(2) a').triggerHandler('click');

        return false;

    });

    

});



</script>

</head>

<body>

<div><a id="logo" href="http://jquery.com" title="Powered By jQuery"></a></div>

<h1 id="banner"><a id="backnav" href="./">&lsaquo;&lsaquo; cycle home</a>jQuery Cycle Plugin - Pager Demo with Extra Link</h1>

<h2...