Elisseii
@Elisseii
Пишу музыку и код.

Как сделать popup просмотр фотографий на wordpress с помощью PhotoSwipe или Magnific-Popup как в VK?

59f3af675d775567241532.png

Столкнулся с задачей сделать нечто подобное на popup окно просмотра фотографий как это реализовано в vk.com но с некоторыми фичами.

Сразу опишу проблемы/задачи на примере 2х вариантов реализации. Просто постараюсь изложить мысли.

1 ВАРИАНТ РЕАЛИЗАЦИИ
На странице выводятся посты в виде фото плиток, в порядке "сначала свежие", сортируются по категориям и тегам, имеют пагинацию с ограничением вывода до 40 постов (картинок) на страницу. Пользователь должен иметь возможность развернуть плитку в слайдер, для того что бы быстро просмотреть все фото в увеличенном варианте, многим нравится листать в таком режиме. В этом всплывающем слайдере помимо фото, должна выводиться развёрнутая информация о товаре с прокруткой (т.е. мы попадаем по сути в пост).

ПРОБЛЕМЫ:
- Пробовал подогнать под эти нужны приятный слайдер PhotoSwipe, но его специфика по умолчанию не позволяет создать большое описание с прокруткой, причем сам автор заверяет что PhotoSwipe для этого не предназначен.
По этому задумался о Magnific-PopUp, так как там есть возможность делать огромные всплывающие окна с HTML содержимым и прокруткой, но есть другие проблемы со ссылками, он вроде как не создаёт ссылки на свои слайды + ко всему Magnific в режиме слайдера работает только с IMG содержимым, HTML не листает как я понял.
Кстати был уже вопрос на тостере про слайдер с HTML содержимым в MagnificPopup,
https://toster.ru/q/269650
но прочитав документацию, я так и не понял как, к тому же остаётся открытым вопрос со ссылками.

2 ВАРИАНТ РЕАЛИЗАЦИИ (мне он даже больше нравится)
Были мысли сделать плитку из фото, по нажатию на которую открывался бы слайдер PhotoSwipe или Magnific, на этот раз с маленьким описанием и генерацией ссылки в адресной строке на конкретный слайд, в слайдере сделать кнопку с ссылкой на страницу полного поста.
Да, тогда пользователь может даже вернуться из поста назад в слайдер к текущему фото, но работать это будет не так хорошо как хотелось бы. Почему?
Тут проблема в том, что пользователь может попробовать поделиться фотографией, находясь в слайдере. Он скопирует ссылку, которая генерируется относительно текущего DOM, но вот ссылка то потеряет свою актуальность как только на странице опубликуются новые посты ибо DOM изменится, а делиться ссылкой находясь в посте какая нибудь секретарша студентка не сразу додумается...

В принципе все эти проблемы были бы решены если научить PhotoSwipe или Magnific генерировать независимые от текущего DOM ссылки или что то в этом роде. Думал ещё об AJAX подгрузке контента но это уже не так быстро как просмотр множества контента в слайдере.

БЕЗ ЧЕГО НЕ ОБОЙТИСЬ
- При просмотре слайдов должны генерироваться/переключаться ссылки. (они не должны изменяться в будущем при добавлении новых фото/постов в галерею, страницу) То есть они не должны привязываться к вёрстке.
Это необходимо что бы пользователь мог 1. Вернуться из поста назад к странице с открытым слайдером и фото, на котором он остановился. 2. Что бы он мог поделиться ссылкой на это фото.

Возможно слишком замудрил...
Может у кого есть идеи и немного времени что бы подумать о моей проблеме и предложить любой вариант решения или свой способ реализации или вообще другой удобный вид представления такого контента...
  • Вопрос задан
  • 628 просмотров
Пригласить эксперта
Ответы на вопрос 1
@vovarevenko
Вот по подмене URL страницы, без её перезагрузки:
Введение в HTML5 History API

Единственное, вам нужно будет определять по URL, какая плитка развернута, и, при переходе, пролистывать страницу к нужной плитке, ну и соответственно, открывать окно.

Насчет HTML в галереях — легче свой написать. Всплывающее окно, вставили картинку, HTML и готово. При переключении просто берется информация из следующей плитки и загружается в окно.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы