http://jquery.malsup.com/cycle/pager7.html shows a way to use image thumbnail as pager. I would like to

Question

0

Asked: May 20, 20262026-05-20T18:50:37+00:00 2026-05-20T18:50:37+00:00

http://jquery.malsup.com/cycle/pager7.html shows a way to use image thumbnail as pager. I would like to

0

http://jquery.malsup.com/cycle/pager7.html shows a way to use image thumbnail as pager.

I would like to add some text description to each image and still use thumbnail as pager. So I need to add a DIV to wrap the image, and also put a P inside the DIV. Can you tell me how to get the image SRC?

In short,

<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /><

becomes:

<div><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /><p>image description</p></div>

Thanks,

Back to codes, here is the original 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 - 'updateActivePagerLink' Demo</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 }
#nav { width: 300px; margin: 15px; float: left }
#nav li { width: 52px; float: left; margin: 2px; list-style: none; padding: 6px; display: block }
#nav a { width: 50px; padding: 0px; display: block; border: 1px solid #ccc; }
#nav li.activeLI { background: #ff8 }
#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.3.2/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://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
// redefine Cycle's updateActivePagerLink function
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('li').removeClass('activeLI')
        .filter('li:eq('+currSlideIndex+')').addClass('activeLI');
};

$(function() {
    $('#slideshow').cycle({
        timeout: 1000,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
        }
    });
});
</script>
</head>
<body>


<div id="demos">
    <table cellspacing="20">
    <tr><td><ul id="nav"></ul></td>
    <td>
        <div id="slideshow" class="pics">
           <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
           <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
           <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
           <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
        </div>
    </td></tr>
    </table>

</div>

</body>
</html>

And here is the markup I want to have:

<!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 - 'updateActivePagerLink' Demo</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 }
#nav { width: 300px; margin: 15px; float: left }
#nav li { width: 52px; float: left; margin: 2px; list-style: none; padding: 6px; display: block }
#nav a { width: 50px; padding: 0px; display: block; border: 1px solid #ccc; }
#nav li.activeLI { background: #ff8 }
#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.3.2/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://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
// redefine Cycle's updateActivePagerLink function
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('li').removeClass('activeLI')
        .filter('li:eq('+currSlideIndex+')').addClass('activeLI');
};

$(function() {
    $('#slideshow').cycle({
        timeout: 1000,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
        }
    });
});
</script>
</head>
<body>


<div id="demos">
    <table cellspacing="20">
    <tr><td><ul id="nav"></ul></td>
    <td>
        <div id="slideshow" class="pics">
           <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
           <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
           <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
           <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
        </div>
    </td></tr>
    </table>

</div>

</body>
</html>