Javascript просматривая фото-коллекцию - PullRequest
Новая
       2

Javascript просматривая фото-коллекцию

0 голосов
/ 24 ноября 2011

Я хотел бы создать сайт, на котором я мог бы представить какой-нибудь проект моего клиента. Он архитектор и хочет, чтобы его клиенты могли просматривать его здания и проекты.

Цель состоит в том, чтобы сделать сетку (3 в ширину, бесконечной длины) из фотографий. На каждом квадрате отображается проект с макс. 12 фото. Я хотел бы отобразить их так, чтобы пользователи веб-сайта могли щелкнуть изображение и перейти к следующему.
Если пользователь нажимает на другой элемент сетки, тот, на который он ранее щелкал, должен оставаться в том же состоянии (последнее показанное фото), как и раньше.

Фотографии находятся в базе данных и поступают в виде array в HTML (я думаю, это то, как это сделать, верно?). Я думал об использовании URL-адреса в качестве ссылки, чтобы позволить сетке знать, какую фотографию показывать, но это бесполезно, поскольку элемент сетки должен помнить свое последнее состояние.

Так что я понял, что Javascript - это путь. Я много знаю о HTML и PHP, но мои навыки работы с Javascript не такие острые. Кто-нибудь может дать мне несколько советов или советов, как это решить?

enter image description here

Ответы [ 2 ]

1 голос
/ 24 ноября 2011

Это супер простой образец. Вам даже не нужен 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>
0 голосов
/ 05 декабря 2011

Я нашел свое решение в плагине JQuery Cycle !Спасибо за усилия, хотя!

...