1

Elastislide カルーセル プラグインを使用して、画像へのパスを持つテーブルから動的に画像を追加しています。現在、jQuery を使用してリスト項目を Elastislide の順序付けられていないリストに追加しています。

問題は、Elastislide の CSS で表示が none に設定されており (CSS ファイルで確認しました)、レンダリングすると正しく表示されることです。

リスト項目を動的に追加すると、それらは表示されません。私は彼らのCSSがまだ何も表示されていないと推測しています。

リスト項目に追加するために使用したコードを次に示します。

$(document).ready(function () {
     $('#aspnetGridView tr').each(function () {
         if (!this.rowIndex) return; // skip first row
         var path = this.cells[0].innerHTML;
         alert(path);
         $('#rack1 #carousel').append('<li><a href="#"><img src="'+ path +'" alt="image03" /></a></li>');
    });
});

そして、ここに静的リスト項目が追加される場所があります。

<div id="rack1"><ul id="carousel"  class="elastislide-list">
<li><a href="#"><img src="images/bookCover/java2.jpg" alt="image05" /></a></li></ul></div>

これは、ページのレンダリング後にカルーセル内の静的アイテムがどのように表示されるかです。firebugを使用してこれを確認しました。

<li style="width: 33.2418%; max-width: 65px; max-height: 76px;"><a href="#"><img src="images/bookCover/aspnetDesign.jpg"></a>

私を助けてください、私が何か間違ったことをしている場所を教えてください。JavaScriptを使うという位置づけでしょうか。

4

1 に答える 1

1

使用しているカルーセルが他のいくつかのプラグインで見たようなものである場合、問題は実際にはキャッシュの問題です。ページが読み込まれると、プラグインは循環に必要なすべてのアイテムのメモリ内配列を作成し、それらを使用して何を表示するかを決定します。そのため、新しいアイテムをマークアップに追加しても、プラグインが認識している「スライド」の配列には含まれません。これは、初期化時に DOM の一部ではなかったためです。

使用しているプラ​​グインのドキュメントを確認した後、これを修正しますが、その間にいくつかのトラブルシューティングを行うことができれば幸いです.

編集：

(確かに重要な) ステップが 1 つ欠けているようです。.add()アイテムを追加した後に呼び出す必要があります。したがって、これを追加します。

$('#rack1 #carousel').add();

そして、あなたは準備ができているはずです（参照：http ://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/ ）。

于 2013-03-09T02:51:29.780 に答える