Question

我想建立一个网站，我可以在其中展示我客户的一些项目。他是一名建筑师，希望他的客户能够滚动他的建筑和项目。

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

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

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

enter image description here

Answer 1

这是一个超级简单的样本。你甚至不需要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>

Answer 2

我在JQuery Cycle - 插件中找到了我的解决方案！谢谢你的努力！

浏览照片集的Javascript

2 个答案: