jQuery Cycle插件-听写缩略图的位置 [英] 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({ 外汇:淡入淡出"， 速度: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>

任何帮助都可以.

谢谢

推荐答案

如果您正在谈论的情况如此处所述

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插件-听写缩略图的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！