Плагин jQuery Cycle - указание расположения миниатюр - PullRequest
Новая
       47

Плагин jQuery Cycle - указание расположения миниатюр

1 голос
/ 22 декабря 2009

Я хотел бы указать, где находятся мои миниатюры, а не использовать основные изображения в качестве миниатюры.

Я почти уверен, что это можно сделать, мне просто нужно немного подтолкнуть в правильном направлении.

Вот мой код: 

<script type="text/javascript">

$ ( '# imageContainer'). Ранее ( ''). Цикл ({ FX: «исчезать», скорость: 2000, время ожидания: 8000, пейджер: '#nav', 

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(i, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" width="121" height="67" /></a></li>'; 
}

});

А вот и HTML: 

<div id="container">
<div id="imageContainer">
    <img src="http://www.ifcj.org/ifcj-08/images/elements/slideshow/1.jpg"  rel="http://www.ifcj.org/ifcj-08/images/elements/slideshow/1t.jpg" width="378" height="210" />
    <img src="http://www.ifcj.org/ifcj-08/images/elements/slideshow/2.jpg" rel="http://www.ifcj.org/ifcj-08/images/elements/slideshow/2t.jpg" width="378" height="210" />
    <img src="http://www.ifcj.org/ifcj-08/images/elements/slideshow/3.jpg" rel="http://www.ifcj.org/ifcj-08/images/elements/slideshow/3t.jpg" width="378" height="210" />
</div>
<div id="nav"></div>

Подойдет любая помощь.

спасибо

1 Ответ

1 голос
/ 22 декабря 2009

Если вы говорите о сценарии, подобном описанному здесь http://malsup.com/jquery/cycle/pager2.html,, вы сможете сделать что-то вроде следующего: 

pagerAnchorBuilder: function(id, slide) { 
    var thumb_prefix = "t_";
    return '<li><a href="#"><img src="' + thumb_prefix + slide.src + '" width="50" height="50" /></a></li>';
}

Это самый простой пример, конечно, вы можете сделать что-то другое в зависимости от вашего соглашения об именах и конкретного приложения, например, вставив t в конце перед расширением: 

pagerAnchorBuilder: function(id, slide) { 

    // Split off the filename with no extension (period + 3 letter extension)
    var new_src = slide.src.substring(0,slide.src.length-4);

    // Add the "t"
    new_src += "t";

    // Add the period and the 3 letter extension back on
    new_src += slide.src.substring(slide.src.length-4,slide.src.length);

    // Set this as the source for our image
    return '<li><a href="#"><img src="' + new_src + '" width="50" height="50" /></a></li>';
}
...