Javascriptでのフォトコレクションの参照

Question

私はクライアントのプロジェクトを紹介できるウェブサイトを作りたいと思います。彼は建築家であり、顧客が建物やプロジェクトをスクロールできるようにしたいと考えています。

目標は、写真をグリッド（幅3、無限）にすることです。すべての四角形で、プロジェクトは最大で表示されます。 12枚の写真。私は、ウェブサイトのユーザーが画像をクリックして次の画像にスクロールできるような方法でそれらを表示したいと思います。
ユーザーが他のグリッドアイテムをクリックした場合、以前にクリックしたグリッドアイテムは以前と同じ状態（最後に表示された写真）にとどまるべきです。

写真はデータベースに入っていて、HTMLのarrayに入っています（これはどうやって作ったのでしょうか？）。私は、URLを参照として使用して、どの写真を表示するかをグリッドに知らせることを考えていましたが、グリッド項目は最後の状態を覚えておく必要があるため、無用です。

私はJavascriptを理解しました。行く方法です。私はHTMLとPHPについてよく知っていますが、私のJavascriptスキルはこれほどシャープではありません。誰かが私にいくつかのアドバイスを提供したり、これをどうやって解決するか？

Answer 1

私はjQueryのCycle -pluginに私の解決策を見つけました！しかし、努力をいただきありがとうございます！

Answer 2

これは超簡単なサンプルです。あなたはjQueryを必要とせず、Javascriptでのみすべてを行うことができます。 jQueryのにに関するご質問については

更新サンプル
http://jsfiddle.net/qxpEz/2/

旧サンプル
http://jsfiddle.net/qxpEz/1/

あなたはこれをチェックアウトする場合があります：
http://docs.jquery.com/Main_Page

のJS

/* Close preview on click again */ 
$("#preview").live('click', function(){ 
    $(this).hide(); 
}); 

/* Handle click events on thumbnails */ 
$("img.thumbnail").live('click', function(){ 

    /* Build content for the preview DIV */ 
    $('#preview').html('<img src="' + $('.last_viewed').attr("src") + '" />'); 
    $('#preview').append($(this).parent(".multi_row").html() ); 

    /* Show images in larger size and show the preview DIV*/ 
    $('#preview .thumbnail').removeClass('thumbnail'); 
    $('#preview').show(); 

    // Set classes to identify the last clicked element 
    $('.last_viewed').removeClass('last_viewed'); 
    $(this).addClass('last_viewed'); 
}); 

HTML

<div id="preview"></div> 

<div id="container"> 
    <div class="multi_row"> 
     <img class="thumbnail" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRi-8XnnXwAZmz_5R5LHRHMNlnYYHCP4WqRdu6vhf_ru8wLK9XB3IrNrwix" /> 
     <img class="thumbnail" src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQSlpPGwa7kTdYj4lraTh8-cUwLyPH8z78UxuwER1DvCK1IsgiB8A" /> 
     <img class="thumbnail" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcSDu5E2q1YEjN7EN2dlNUe81CQ6jVe_kcHrUSTRjB0PmG9wn5KA" /> 
    </div> 

    <div class="multi_row"> 
     <img class="thumbnail" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcQvntvFejchqRwv41EqFxEqQAaFvc84xQB72LEmg0IZGM-KsfCZ" />   
     <img class="thumbnail" src="https://encrypted-tbn0.google.com/images?q=tbn:ANd9GcQNMKqnVN0w6gemdm1DXlvCYhlx4DzK7XvyK2zJ2WaP86TUfKuF" />   
     <img class="thumbnail" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcRLBVGB4YSU1ZSx4hTufNxcV8df_qOvHqCVPX9qqnwaFpKF0e9f" /> 
    </div> 
</div>