Как сделать просмотр изображений из модального окна?

Question

[vampire444]

Такая проблема. На главной странице есть слайдер цитат постов определённой рубрики. При клике на кнопку или заголовок в модальном окошке Bootstrap открывается сама запись (без перезагрузки страницы). В записи почти всегда есть несколько фоток и нужно организовать их красивый просмотр. Испробовал кучу галерей (как плагинов, так "ручками устанавливаемых" скриптов), результат один - ничего не работает. Либо крашится бутстрап и окошко вообще не открывается (при этом перестаёт работать ещё половина страницы, такое было при установке неWP плагинов), либо не происходит никаких изменений, то есть картинки просто открываются во вкладке браузера, как будто и нет никакого плагина.
Бьюсь над этим уже почти неделю, ничего придумать так и не смог.
Вот ещё немного сведений, вдруг чем поможет:
1) сайт одностраничник, с возможным расширением в будущем. Т.е. пока не предполагается просмотр постов на отдельных страницах, только в модалках. Прихоть заказчика, переубедить не смог.
2) тема полностью самописная, сделана на бутстрапе (+ jQuery).
3) контент поста в модалку подгружается так:

function load_post(ID) {
                $('#post-title').text($('#caption-title-'+ID).text());
                $('#post-content').load("./?p="+ID);
            };

Т.е. одна модалка, в которой, при клике по той или иной ссылке, меняется контент.
4) т.к. просмотр постов на отдельных страницах не предусмотрен, а обращение к singl.php производится, то в нём не подключаются ни header.php, ни footer.php. Следовательно не подключаются и все доп. скрипты и стили. (Ведь они же не нужны, решил я, раз пост открывается в модальном окне, и всё подключено уже в основном окне. Да и зачем мне в модалке шапка и подвал самого сайта. Или в этом и есть косяк? Вообще, я пробовал их подключать, но на галереи это никак не влияло)

В принципе, совсем не обязательно, что бы просмотр фото осуществлялся в ещё одном всплывающем окне. Сам придумывал такой вариант:
первая картинка из серии открыта сразу крупно, а под ней остальные миниатюры. Переключается всё это дело стрелками и/или кликом на другую фотку. Реализовать не сложно даже самому, но тут уже появилась другая проблема - как сделать удобное, для обычного человека, добавление такой штуки в пост из админки. Находил несколько плагинов с такой функцией - снова ничего не работает, просто подряд идут картинки.

Для наглядности прикрепляю пару скринов
Вот такой слайдер постов:

И открывается пост вот так. Тут, кроме текста, будут картинки, которые необходимо красиво смотреть


Буду рад любому решению!

Answer 1

[nikfakel]

Возможно, у вас картинки подгружаются и создаются скриптом, на них не вешается обработчик и потому ничего не происходит. Добавьте картинку не в модальном окошке, а просто в теле сайта, и протестируйте, как будет там открываться. Если проблема в этом, то обычные скрипты модальных окон вам не подойдут, либо самому писать, либо изменить способ загрузки картинок. Как вариант (если постов с картинками не слишком много), сразу выводить посты через PHP и делать их скрытыми. А вообще лучше бы адрес сайта дали.

Comments

[vampire444]

Картинки добавляются в пост через админку, вместе с текстом записи. В зависимости от плагинов, которые я пробовал, картинки добавлялись либо через плагиновскую добавлялку (как, например, в случае с nextgen), либо через встроенную в WP.
Не в модельном окошке всё, конечно же, работает. Но фишка именно в том, что бы работало в модельном окне. Самое интересное, что из бутстраповского модального окна я могу открыть ещё одно поверх первого, но галереи почему то так не открываются. И даже не удаётся понять почему, ведь в консоле хрома ошибок нет.
Посты, как вы и написали, выводятся через php, через запрос get_posts('cat=1'); ну и дальше циклом.
Постов с картинками будет 90%.
Ссылку дать пока не могу, т.к. сайт пока совсем ещё не доделан и закрыть от общего доступа. Если только в личку.

[nikfakel]

vampire444: напишите, куда вам написать в личку =)

[vampire444]

nikfakel: Да. Только сейчас обнаружил, что на тостере нет лички)
контакт - https://vk .com/ id108309835
почта - urazov-kirill{пёсик}mail .ru

Answer 2

[Ninja Mate]

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

а вообще у плагинов подключается свой скрипт js и css, так? а на странице они у вас подключаются? если да, то соблюдается ли нужная разметка для div в модале.

Comments

[vampire444]

Постов планируется довольно много (несколько десятков) и почти все с фотографиями. Поэтому неприемлемо загружать их всех сразу. (если я правильно понял первую часть вашего ответа)

на странице всё подключается корректно (иначе бы в консоль хрома выводились ошибки 404), разметка соблюдена.

с nikfakel пообщались, он подсказал в чём проблема, сейчас пишется решение.
О результатах отпишусь, т.к. за время поиска ответа на свой вопрос понял, что в интернетах нет решения такой задачи (ну или я не смог его найти за несколько дней поисков). Так что думаю будет полезным оставить решение тут.

[Ninja Mate]

вы не правильно поняли первую часть. посты загружаются в модальное окно, а создаются как отдельная запись, что и происходит обычно в wp

[vampire444]

Ninja Mate: вот щас ещё меньше понял)))
Как это организовано у меня: изначально пустое модальное окно. По клику на кнопку/заголовок соответствующей цитаты (the_excerpt) в модальное окно загружается запись по переданному id (код JS приведён в вопросе). Как видно из кода, при загрузке поста происходит обращение к файлу single.php. Ему GET-запросом "?p=id" передаётся id записи (как это происходит в wp по умолчанию) и он возвращает контент нужной записи. single.php содержит в себе только стандартный Цикл WP и ничего более.

[Ninja Mate]

vampire444: wordpress.stackexchange.com/questions/95661/open-w...

[Ninja Mate]

vampire444: https://allurewebsolutions.com/blog/open-wordpress...

[vampire444]

Ninja Mate: я в английском не силён, но на сколько понял эти две ссылки о том, как открыть пост в модальном окне. С этим у меня проблем никаких нет. У меня проблема в открытии фотографий из этого модального окна

[Ninja Mate]

vampire444: плагин работает если открыть пост сам по себе?

[vampire444]

Ninja Mate: Нет, т.к. в single.php не подключаются скрипты/стили
Но работает, если сделать статичное модальное окно, в которое сразу через php вывести контент определённого поста, но такой вариант, конечно же, не вариант)

[Ninja Mate]

vampire444: зачем статический?! get_post можно переменную задать

$my_postid = 12;//сюда засовываем переменную
$content_post = get_post($my_postid);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;

[Ninja Mate]

vampire444: луп написать который будет ''статичные'' модалы делать на странице сразу при загрузке в зависимости от того какие записи выводите (это простое решение), или в jQuery.ajax запихнуть который генерирует под каждый вызов модала такой же код но с ''динамичным '' id поста... если записей всего 10-15 то первый вариант хорошо подойдет

[vampire444]

Ninja Mate: я в курсе про это. Статическим сделано для проверки работоспособности скрипта. Что принципиально измениться в вашем коде, если удалить первую строчку, а во второй вместо переменной написать 12? =)
А "статичное" - имелось ввиду, что выполнено не подгрузкой через JS, а ещё на стороне сервера, средствами php.

[Ninja Mate]

vampire444: если средствами php то нужно шаблон страницы создавать и вызывать его соответственно по надобности. код php один раз выполняется и на этом все, он свое дело сделал и динамически без ajax выполняться не будет

[vampire444]

Ninja Mate: мне кажется, вы меня не понимаете))) ну или я вас)
Первый вариант не подойдёт, я уже говорил почему в первом комментарии к вашему ответу.
Второй вариант, точнее его аналог, реализован сейчас (см. вопрос) и с ним проблем нет.
Позволю себе ещё раз напомнить в чём конкретно проблема: КАК ОТКРЫТЬ ИЗОБРАЖЕНИЯ ИЗ МОДАЛЬНОГО ОКНА в приемлемом виде (галерея, слайдер, etc.)