通过照片收集浏览Javascript

Question

我想制作一个网站，我可以展示我的客户的一些项目。他是一名建筑师，希望他的客户能够浏览他的建筑物和项目。

目标是使网格（3宽，无限长）的照片。在每个方块中，一个项目以最大值显示。 12张照片。我想以一种方式显示它们，网站的用户可以点击图像并滚动到下一个图像。
如果用户点击另一个网格项目，他以前点击的网格项目应该保持与之前相同的状态（上次显示的照片）。

这些照片是在一个数据库中，并在HTML中进来array（这是怎么做到的，我猜是吧？）。我正在考虑使用URL作为参考，让网格知道要显示哪张照片，但这是没用的，因为网格项必须记住他的最后一个状态。

所以我想通了Javascript是要走的路。我对HTML和PHP有很多了解，但是我的JavaScript技能并不是那么尖锐。有人能给我一些建议或点击如何解决这个问题吗？

Answer 1

我发现我在JQuery的Cycle -plugin解决方案！感谢您的努力！

Answer 2

这是一个超级简单的示例。你甚至不需要jQuery，只能用Javascript做所有事情。

更新的样本
http://jsfiddle.net/qxpEz/2/

旧样品
http://jsfiddle.net/qxpEz/1/

有关jQuery的问题，你可能要检查了这一点：
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>