アンカーとサムネイルを使用したjQueryサイクル

Question

メイン画像がアンカーにラップされ、サムネイルナビゲーションがあるスライドショーを作成するためにjQuery Cycleプラグインを使用しています。私は基本的にjQueryサイクルのdemo pageと同じコードを持っています。リンク内の画像をラップすると、サムネイルが壊れてしまいました。私は$('#slideshow img).attr('src')の "slide.src"を削除しようとしましたが、まだ未定義として戻ってきます。

$('#slideshow').before('<ul id="slideshow-nav">').cycle({ 
fx: 'fade', 
speed: 'slow', 
timeout: 0, 
pager: '#slideshow-nav', 

pagerAnchorBuilder: function(idx, slide){ 
return '<li class="thumbnail"><a href="#"><img class="rounded" src="' + slide.src + '" width="137" height="129" /></a><span class="highlight"></span><span class="gloss"></span></li>'; 
} 
}); 

私のHTMLはこれです。

<div id="slideshow"> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
</div> 

Answer 1

$.before()に有効なHTMLフラグメントを指定する必要があります。現時点では、</ul>タグを閉じていません。あなたはWebkitのブラウザでFirebugのか、開発ツールを使用している場合

$('#slideshow').before('<ul id="slideshow-nav" />').cycle({ ... 

あなたは常にjQueryのでconsole.log($("#slideshow-nav"));またはconsole.log($(slide));を書き込むことによって発見されているものの要素を参照することができます。これを行うにはクリーンな方法は、自己終了タグにありますあなたのコールバック関数

Answer 2

画像を破壊する何らかの理由でサムネイルを修正しているスクリプトのどこかに、問題はありません。