Выкладываю свой собственный плагин для открытия изображений во всплывающем окне без перезагрузки страницы.
Содержание:
- PHP 5
- WordPress 2.8.x или выше
- Поддержка javascript браузером клиента
- Скачать плагин
- Загрузить файлы плагина на сервер WordPress в папку /wp-content/plugins
- Активировать плагин через панель управления WordPress
Плагин использует javascript библиотеки jQuery и Thickbox, входящие в дистрибутив WordPress. Необходимые для работы всплывающего окна классы и атрибуты устанавливаются автоматически с помощью простого кода jQuery. На странице конфигурации плагина этот код можно изменить под себя или полностью удалить (ручной режим).
В ручном режиме классы и атрибуты необходимо прописывать самостоятельно внутри открывающего тега <a>:
class=»thickbox» — необходим для указания ссылки, которую надо открыть во всплывающем окне. По умолчанию устанавливается для всех ссылок, имеющих внутри изображение.
title=»Текст» — значение этого атрибута отображается внизу всплывающего окна как подпись под изображением. По умолчанию title ссылки берется из атрибута alt изображения находящегося внутри ссылки.
rel=»Любое значение» — необходим для отображение во всплывающем окне ссылок навигации (вперед/назад) между элементами, имеющими одинаковый атрибут rel. По умолчанию задействован только для стандартных галерей WordPress. Для корректного функционирования тег gallery должен использоваться с атрибутом link=»file». Пример: [ gallery link=»file» ]
Кстати, внутри всплывающего окна можно отображать не только изображения, но и другие веб-страницы, pdf и т.п.
Как вставить изображние
Изображения вставляются как обычно, но есть один нюанс. Для правильной работы необходимо использовать опцию «Ссылка на файл». См. скриншот:
Демонстрация работы
Отдельное изображение. Подпись во всплывающем окне соответствует значению атрибута alt изображения. Навигационные ссылки отсутствуют.
Стандартная галерея WordPress. Во всплывающем окне присутствуют навигационные ссылки.
Другие плагины:
- Q2W3 Inc Manager
- Q2W3 Yandex Speller (проверка русской и украинской орфографии для TinyMCE)
45 ответов к “Q2W3 Thickbox. Открытие изображений во всплывающем окне”
И еще всплыл один вопрос — а как отключить «всплывание» для некоторых изображений?
Очень просто!
Изменить код для установки класса thickbox таким образом:
jQuery(".post a img").not(".no_thickbox").parent("a").addClass("thickbox");
Затем присваиваешь класс no_thickbox изображению, всплывание которого требуется отключить.
Спасибо, отлично, все работает!
Понял. Проблема в сильно переправленной теме, ручки мои кривые.
Спасибо, все заработало (включил в код wp_footer();)!
Может быть какие-то проблемы с JQuery? WP 2.9.1 Lecactus Normal.
Сейчас попробую обновить до 2.9.2.
Smart,
я не вижу чтобы у вас на странице подгружалась библиотека thickbox. Проблема в этом.
Она должна подгружаться в футер. Проверьте, в footer.php используется функция <?php wp_footer() ?> ?
Также можно вручную прописать следующий код (перед тегом </body>):
<script type="text/javascript" src="https://www.q2w3.ru/wp-includes/js/thickbox/thickbox.js?ver=3.1-20091124"></script>
<script type="text/javascript">var tb_pathToImage = "https://www.q2w3.ru/wp-includes/js/thickbox/loadingAnimation.gif";var tb_closeImage = "https://www.q2w3.ru/wp-includes/js/thickbox/tb-close.png";</script>
https://www.q2w3.ru — заменить на название своего сайта.
Здравствуйте!
Никак не могу настроить. Всю голову сломал =(
Или в теме дело или в версии WP.
Вот тестовая страница — http://plast-grupp.ru/vanny/priamougolnie
Пробовал по-разному. Буду очень благодарен за помощь =)
У меня еще один вопрос.
Как изменить размер всплывающего окна?. То есть проблема в том, что окно с изображением открывается не на тот размер который хотелось. На изображениях изображены электрические схемы и при заданных размерах всплывающего окна они не достаточно прорисованы, хотя сами оригиналы изображений имеют большое разрешение.
Можно изменить размер всплывающего окна или нет? если можно, то где в настройках, что изменить.
Спасибо.
Размер всплывающего окна можно изменить только если ты открываешь в нем html-страницу, а не графику. Тогда да, в url ссылки добавляешь параметры (width и height) — это работает.
С графикой же все сложнее. Размер окна зависит от размера самого изображения и от размера окна браузера. Задать фиксированное значение здесь нельзя. У кого больше разрешение экрана, тому будет удобнее рассматривать твои схемы.
Я думаю, тебе надо либо полностью отказываться от thickbox для просмотра изображений, либо сообщить пользователям, что они могут посмотреть полное изображение, открыв его в отдельном окне (правый клик на миниатюре, далее выбираем пункт открыть в новой вкладке — это для эксплорера).
Сделал следующее…
1. Поместил содержимое страниц в div «post»
2. Установил код код jQuery по умолчанию jQuery(«.post a img»).parent(«a»).addClass(«thickbox»);
Все заработало..
Спасибо за помощь. С новым годом.
Попробовал изменить jQuery(".post a img") на jQuery("#content a img").. не работает.
Вставил содержание записей в .. тоже не работает.
Придется менять шаблон или оставлю как есть. Что обидно на других моих сайтах работает. Отличный плагин.
Спасибо за помощь.
А если руками прописать сlass="thickbox" ссылке на картинку, будет работать?!
Посмотрел, что у вас сейчас на странице. Вижу, добавили div с классом post. НО код jQuery("#content a img").addClass("thickbox"); присваивает класс thickbox не ссылкам на картинки, а самим картинкам, что неправильно.
Если текущий код страницы не править, то в настройках плагина надо восстановить код jQuery по умолчанию — jQuery(".post a img").parent("a").addClass("thickbox");
Должно работать, черт подери! )
Вот сайт где не работает svapka.ru
Валерий, посмотрел страницу sxema-samodelnogo-svarochnogo-apparata.htm, действительно, проблема в шаблоне.
Думаю, вам поможет, если в настройках плагина вы измените jQuery(".post a img") на jQuery("#content a img"), или в файлах шаблона содержание одиночных страниц поместите внутрь <div class="post"></div>
Делаю все так как вы написали, но не работает. На другом сайте работает (на том же хостинге). Может из за шаблона сайта эти проблемы? В этом случае куда посмотреть в шаблоне и что изменить?
Спасибо
Установил плагин, активировал.. и не понятно как вставить изображения в запись.
Можете здесь выложить скрины, как вы вставляете изображение в запись в автоматическом режиме.?
P.S> У меня WP 2,8.4
Валерий, изображение вставляются как обычно. Сделал скриншот. См. выше.
Вот вы здесь вставили изображение в статью, а в комментарий покажите как на примере вашего сайта, то есть вставьте в комментарий.