Question

http://jquery.malsup.com/cycle/pager7.html显示了将图片缩略图用作寻呼机的方法。

我想为每个图片添加一些文字说明，仍然使用缩略图作为寻呼机。所以我需要添加一个DIV来包装图像，并在PIV中放入一个P.你能告诉我如何获得图像SRC吗？

简而言之，

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

成为：

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

谢谢，

返回代码，这是原始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>

这是我想要的标记：

<!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>

Answer 1

http://forum.jquery.com/topic/a-question-on-cycle-plugin

关于Cycle插件的问题

1 个答案: