Вопрос по плагину Cycle - PullRequest
Новая
       22

Вопрос по плагину Cycle

0 голосов
/ 11 марта 2011

http://jquery.malsup.com/cycle/pager7.html показывает способ использования миниатюры изображения в качестве пейджера.

Я хотел бы добавить текстовое описание к каждому изображению и при этом использовать миниатюру в качестве пейджера.Поэтому мне нужно добавить DIV, чтобы обернуть изображение, а также поставить P внутри DIV.Можете ли вы сказать мне, как получить изображение 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>

1 Ответ

0 голосов
/ 22 марта 2011
...