1

私がやりたいのは、メインの画像をサムネイルとして使用するのではなく、サムネイルの場所を指定することです。

私はこれができると確信しています。正しい方向に少しプッシュする必要があるだけです。

ここに私のコードがあります:

<script type="text/javascript">

$('#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>

どんな助けでも構いません。

ありがとうございました

4

1 に答える 1

1

ここ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>';
}

これは最も単純な例です。もちろん、命名規則と特定のアプリケーションに応じて、異なることを行うことができます。たとえば、拡張子の前に at を挿入します。

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>';
}
于 2009-12-22T20:37:08.097 に答える