0

JQUERY の入門知識を広げるための楽しみとして、画像ギャラリーを作成しています。ギャラリーにはたくさんのサムネイルがあり、クリックすると画像ビューアー div のすぐ下に大きな画像が表示されます。さらに、サムネイルがアクティブな場合 (画像が表示されている場合)、サムネイルは 75px から 100px にアニメーション化されます。

IDをすべての画像に接続し、それを各画像アンカーに渡すことで、手動で機能させました。以下の構造：

<div class="thumbnails" id="thumbnail_1">
    <a href="#" class="thumb_link" onclick='loadImage("#thumbnail_1","#image_1", "1");'>
    <img src="image-url-#.png" alt="Image 1"  border="0"  id="image_1" class="thumb_img"  /></a> 
  </div>

これは、すべてのサムネイルに対して繰り返されます。ユーザーがクリックすると、画像が読み込まれます <div id="image_viewer"></div>

私の問題は、ギャラリーをできるだけ動的にしたいということです。すべてのサムネイルの ID を作成しなくても、ユーザーがクリックしたリンクを知る方法が必要です。

を使用してリンクの数を取得できます。これにより$(".thumb_link").length;、サムネイル リンクの数がわかります。しかし、そのサムネイルに関連する画像を表示するために、どのサムネイルがクリックされているかをどのように判断できますか?

例: ユーザーが 3 番目のサムネイルをクリックすると、Thumb 3 の大きな画像が表示されます。

loadImage 関数:

function loadImage(thumb, id, imgNum){  
    $(thumb).animate({width:100, height:100},500); 
            $(id).animate({width:100, height:100},500); 
            $(thumb + " a").animate({width:100, height:100},500);


            $("#image_viewer").html('<img src="imagesurl-'+ imgNum + '.jpg" border="0" alt="image: '+ imgNum+'" />');



    }

次のように、各タグが割り当てられたクラスごとに画像をロードできるようにしたい:

$(".thumbnails").eq(whatever_the_index_value_is).animate({width:100, height:100},500);

この情報にアクセスするには、クリックの配列値を知る必要があります。

--

これを行う理由の 1 つは、特定のサムネイル属性 (画像の alt タイトル src など) を見つけて、別の場所にプラグインできるようにするためです。

どんな助けでも大歓迎です！

4

1 に答える 1

2 
 $(document).ready(function(){
   $(".thumb_link").click(function(event){
     event.preventDefault();
     check_image($(this));
   });
 });

上記$(this)のコードの は、クリックされた画像を含む JavaScript オブジェクトです。その後、必要な情報を照会できます。

于 2010-07-16T17:51:16.827 に答える