Как организовать загрузку и отображение данных?

Question

[Лев Александров]

Представьте страницу с портфолио, там есть проекты:


При клике на проект открывается попап окно с галлерей этого проекта и подробным описанием:


Хочу сделать это без CMS, но не могу пока понять, как мне это все организовать, именно организовать, а загружать отображать, запрограммировать и прочее я знаю как.
Вот что я думал:
создать таблицу с проектами, туда добавить ид, имя, краткое описание, маленькое изображение (путь до него), большое описание, заголовок в попапе.
создать таблицу для фоток и для каждой фотки указать ид проекта
и тоже самое для видосов.
Ок.
Делаю запрос на получение всех проектов и формирую сетку с проектами на странице.
А как с попапами?
Для каждого проекта тоже формировать отдельный попап? Тогда форма обратной связи будет дублироваться, мне кажется это не очень...
Или сделать один попап и в него уже как-то подгружать данные проекта, на который кликнули? Но как это сделать? Делать запрос на извлечение фоток при каждом клике? А не затратно ли это? Или что, я не понимаю.

Comments

[Антон Р.]

Делай отдельные страницы для проектов, pop-up для просмотра портфолио фиговая идея, примерно для всего, начиная с SEO и заканчивая тем что невозможно кинуть ссылку на проект.

[Лев Александров]

Антон Р., не могу менять это, т. к. не для себя делаю. Да и почему нельзя ссылку кинуть? Где-нибудь после описания просто оставить ссылку же можно

[Антон Р.]

Лев Александров,

Для каждого проекта тоже формировать отдельный попап?

- нет, делаешь один шаблон pop-up с формой и при клике загружаешь в него нужные данные, в том числе в форму.

[Лев Александров]

Антон Р., с помощью AJAX делаю запрос на PHP скрипт, а он уже загружает данные из бд и возвращает в JS? Не, форма везде одинаковая - просто запрашивается имя и телефон.

[Лев Александров]

Антон Р., так да или нет?

Answer 1

[Сергей Кореневский]

1.Каждая карточка проекта будет иметь блок с краткой информацией и с полной информацией.
2.Когда блок с полной информацией картинки в которой в ней с ленивой загрузкой находятсы, то если блок имеет Display: none, то картинки не грузятся.
3. В каждой карточке распологаете Активный элемент, например кнопку (но не ссылку).
4.Тег лейбл этой кнопки разворачиваете на всю карточку краткой инфы. Когда посетитель кликает на карточку краткой инфы, то эта кнопка становится в фокусе.
5.Делаете стиль в условиях которого находится правило, что если кнопка в фокусе, то скрытый блок с инфой(попап) делаете Display: block;
6.После этого как картинки появятся на экране, они начнут подгружатся в попапе.
7.Чтобы при смене фокуса кнопки на сайте ПОПАП не изчезал используйте стиль focus-within.
8.Вы можете сделать форму обратной связи одну на все попапы сразу.
9.для каждого блока INPUT указываете имя с квадратными скобками вконце.
10 в блоке проекта с краткой инфой вместо кнопки можно использовать RadioButton.
11 разумеется кнопку или радиобутон нужно дизайнерски уменьшить и сделать невидимым.

Вы сами сайт хотели сделать чтобы продемонстрировать верстку или умение программировать, я думаю что лучше использовать готовую CMS с написанием своего компонента или модуля или использовать Framework.
Многих интересует как люди умеют пользоватся фреймворком в решении типичных задачь, а не сам код который так или иначе будет написан с ошибками в структурной организации.

Answer 2

[sasmoney]

jquery в помощь