Как реализовать верстку и выполнении блока отзыва?

Question

[parnasmi]

Всем привет!
Верстаю очередной макет. В нем дизайнеры нарисовали более менее сложный на мой взгляд блок отзыва.
Скрин блока прилагается. Блок состоит из множество маленьких кликабельных картинок. При клике на каждом из них основная большая картинка по середине должно меняться на соответствующий. И текст отзыва и прочее тексты тоже должно меняться на соответствующий. Кроме того, все это запихнуть в слайдер. То есть, Количество слайдов = количеству отзывов = количеству лиц, на которые можно нажать, чтобы прочитать отзыв. При смене слайда отзыв тоже должен меняться. К сожалению, в JS/JQuery не очень силен. Не подскажите, каким образом можно реализовать логику работу данного блока? Менять картинку не проблема. А вот пока четко не соображаю где и каким образом хранить данные и как вытягивать и поставить при нажатии. Спасибо заранее.

Comments

[Андрей]

Количество слайдов = количеству отзывов = количеству лиц, вот это момент не понятен, по крайней мере скриншот этому требованию совсем не соответствует

Answer 1

[Иван Антонов]

Как меняете картинку, так и отзыв.
На картинку добавляете атрибут (например data-text-id) с id скрытого материала.
И когда нажимаете на картинку:

1. Меняете картинку в центре,
   
2. Скрываете все открытые отзывы,
   
3. Открываете отзыв с id в атрибуте data-text-id
   

Вот пример:

<div class="avatars">
     <img class="avatar avatar-big" id="mainAvatar" src="avatar1.jpg">
     <img class="avatar" src="avatar1.jpg" alt="Ирина Петровна" data-report-id="report1">
     <img class="avatar" src="avatar2.jpg" alt="Игорь Семенович" data-report-id="report2">
     <img class="avatar" src="avatar3.jpg" alt="Людмила Батьковна :)" data-report-id="report3">
</div>
<div class="reports">
    <div class="report" id="report1">Классно работают ребята</div>
    <div class="report" id="report2">Заказал. Привезли. Круто!</div>
    <div class="report" id="report3">Куда я попала?! О_О</div>
</div>

Грубо говоря, вот так:

$(function() {
    $('[data-report-id]').click(function() {
        $('#mainAvatar').attr('src', $(this).attr('src'));
        $('.report').hide();
        $('#' + $(this).attr('data-report-id')).show();
    });
});

Comments

[parnasmi]

Я собирался менять картинки следующим образом: На атрибуте href в превьюшках(каждая превьюшка - отдельная картинка) будут прописаны путь к большому картинку. Таким образом при нажатии меняем картинку. А вот сам как менять текст отзыва не очень понял. Можно как то поподробнее. Огромное спасибо заранее!

[Иван Антонов]

parnasmi: рядом с href добавь еще один атрибут например data-report-id. Всю логику уже давно описал.

[parnasmi]

Огромное Спасибо!!! Вы меня спасли! Попробую. Буду отписаться.

[parnasmi]

ПОлучилось. Спасибо еще раз!

[Иван Антонов]

parnasmi: Можно не благодарить - просто щелкни "Отметить решением" :)