通过照片收集浏览Javascript
问题描述:
我想制作一个网站,我可以展示我的客户的一些项目。他是一名建筑师,希望他的客户能够浏览他的建筑物和项目。通过照片收集浏览Javascript
目标是使网格(3宽,无限长)的照片。在每个方块中,一个项目以最大值显示。 12张照片。我想以一种方式显示它们,网站的用户可以点击图像并滚动到下一个图像。
如果用户点击另一个网格项目,他以前点击的网格项目应该保持与之前相同的状态(上次显示的照片)。
这些照片是在一个数据库中,并在HTML中进来array
(这是怎么做到的,我猜是吧?)。我正在考虑使用URL作为参考,让网格知道要显示哪张照片,但这是没用的,因为网格项必须记住他的最后一个状态。
所以我想通了Javascript是要走的路。我对HTML和PHP有很多了解,但是我的JavaScript技能并不是那么尖锐。有人能给我一些建议或点击如何解决这个问题吗?
答
这是一个超级简单的示例。你甚至不需要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>
开始通过jQuery教程的方式。这是一个很好的图书馆,很容易学习和使用。祝你好运! – maxedison
好的,很棒的提示。我有特别的教程,我应该检查一下吗? – Michiel