Рубрики
Q2W3 WordPress Плагины

Q2W3 Thickbox. Открытие изображений во всплывающем окне

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

Содержание:

Системные требования

  1. PHP 5
  2. WordPress 2.8.x или выше
  3. Поддержка javascript браузером клиента

Установка

  1. Скачать плагин
  2. Загрузить файлы плагина на сервер WordPress в папку /wp-content/plugins
  3. Активировать плагин через панель управления WordPress

Особенности

Плагин использует javascript библиотеки jQuery и Thickbox, входящие в дистрибутив WordPress. Необходимые для работы всплывающего окна классы и атрибуты устанавливаются автоматически с помощью простого кода jQuery. На странице конфигурации плагина этот код можно изменить под себя или полностью удалить (ручной режим).

В ручном режиме классы и атрибуты необходимо прописывать самостоятельно внутри открывающего тега <a>:
class=»thickbox» — необходим для указания ссылки, которую надо открыть во всплывающем окне. По умолчанию устанавливается для всех ссылок, имеющих внутри изображение.
title=»Текст» — значение этого атрибута отображается внизу всплывающего окна как подпись под изображением. По умолчанию title ссылки берется из атрибута alt изображения находящегося внутри ссылки.
rel=»Любое значение» — необходим для отображение во всплывающем окне ссылок навигации (вперед/назад) между элементами, имеющими одинаковый атрибут rel. По умолчанию задействован только для стандартных галерей WordPress. Для корректного функционирования тег gallery должен использоваться с атрибутом link=»file». Пример: [ gallery link=»file» ]

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

Как вставить изображние
Изображения вставляются как обычно, но есть один нюанс. Для правильной работы необходимо использовать опцию «Ссылка на файл». См. скриншот:

Форма вставки изображения

Демонстрация работы
Отдельное изображение. Подпись во всплывающем окне соответствует значению атрибута alt изображения. Навигационные ссылки отсутствуют.

Филя
Филя

Стандартная галерея WordPress. Во всплывающем окне присутствуют навигационные ссылки.

Другие плагины:

45 ответов к “Q2W3 Thickbox. Открытие изображений во всплывающем окне”

Очень просто!
Изменить код для установки класса thickbox таким образом:
jQuery(".post a img").not(".no_thickbox").parent("a").addClass("thickbox");
Затем присваиваешь класс no_thickbox изображению, всплывание которого требуется отключить.

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&gt;
<script type="text/javascript">var tb_pathToImage = "https://www.q2w3.ru/wp-includes/js/thickbox/loadingAnimation.gif&quot;;var tb_closeImage = "https://www.q2w3.ru/wp-includes/js/thickbox/tb-close.png&quot;;</script>
https://www.q2w3.ru — заменить на название своего сайта.

У меня еще один вопрос.

Как изменить размер всплывающего окна?. То есть проблема в том, что окно с изображением открывается не на тот размер который хотелось. На изображениях изображены электрические схемы и при заданных размерах всплывающего окна они не достаточно прорисованы, хотя сами оригиналы изображений имеют большое разрешение.

Можно изменить размер всплывающего окна или нет? если можно, то где в настройках, что изменить.

Спасибо.

Размер всплывающего окна можно изменить только если ты открываешь в нем 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").. не работает.
Вставил содержание записей в .. тоже не работает.

Придется менять шаблон или оставлю как есть. Что обидно на других моих сайтах работает. Отличный плагин.
Спасибо за помощь.

Посмотрел, что у вас сейчас на странице. Вижу, добавили div с классом post. НО код jQuery("#content a img").addClass("thickbox"); присваивает класс thickbox не ссылкам на картинки, а самим картинкам, что неправильно.
Если текущий код страницы не править, то в настройках плагина надо восстановить код jQuery по умолчанию — jQuery(".post a img").parent("a").addClass("thickbox");
Должно работать, черт подери! )

Валерий, посмотрел страницу sxema-samodelnogo-svarochnogo-apparata.htm, действительно, проблема в шаблоне.
Думаю, вам поможет, если в настройках плагина вы измените jQuery(".post a img") на jQuery("#content a img"), или в файлах шаблона содержание одиночных страниц поместите внутрь <div class="post"></div>

Делаю все так как вы написали, но не работает. На другом сайте работает (на том же хостинге). Может из за шаблона сайта эти проблемы? В этом случае куда посмотреть в шаблоне и что изменить?
Спасибо

Установил плагин, активировал.. и не понятно как вставить изображения в запись.

Можете здесь выложить скрины, как вы вставляете изображение в запись в автоматическом режиме.?

P.S> У меня WP 2,8.4

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.