jQuery Cycle Plugin - 指定缩略图的位置 [英] jQuery Cycle Plugin - Dictate locaton of thumbnails
问题描述
我想做的是指定缩略图的位置,而不是使用主图像作为缩略图.
What I would like to do is dictate where my thumbnails are instead of using the main images as the thumbnail.
我很确定这是可以做到的,我只需要朝着正确的方向努力.
I'm pretty sure this can be done, I just need a little push in the right direction.
这是我的代码:
<script type="text/javascript">
$('#imageContainer').before('').cycle({fx: '淡入淡出',速度:2000,超时:8000,寻呼机:'#nav',
$('#imageContainer').before('').cycle({ fx: 'fade', speed: 2000, timeout: 8000, pager: '#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>
任何帮助都可以.
谢谢你
推荐答案
如果您谈论的是像这里描述的场景 http://malsup.com/jquery/cycle/pager2.html,您应该可以执行以下操作:
If you're talking about a scenario like the one described here http://malsup.com/jquery/cycle/pager2.html, you should be able to do something like the following:
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:
This is the simplest example, of course you can do something different depending on your naming convention and particular application, for example inserting a t at the end before the extension:
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>';
}
这篇关于jQuery Cycle Plugin - 指定缩略图的位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!