Плагин для WordPress. Q2W3 Thickbox. Открытие изображений во всплывающем окне.
Выкладываю свой собственный плагин для открытия изображений во всплывающем окне без перезагрузки страницы.
Содержание:
- Системные требования
- Установка
- Особенности
- Как вставить изображение
- Демонстрация работы
- Скачать плагин
- 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)
Themocracy
сижу вот экспериментирую с плагином кактуса…пока все кроме одного работают с темами, перепробовал порядка 10 тем, темы брал обычные с паблика. Пробовал все на денвере, может на нормальном хосте и не пойдут…хотя не должно такого быть.
а можно сделать так, чтоб все картинки например на радикале хранились?
В контексте данного плагина могу сказать, что ему все равно откруда грузить изображения.К сожалению thickbox грузит страницы/изображения только если они находятся на том же домене, что и страница инициализирующая thickbox… Так что увы… изложенный ниже вариант не сработает.Т.е. возможен такой вариант:
На свой WP-сайт закачиваете легкие миниатюры изображений. Большие полноразмерные файлы закачиваете на радикал или что-то подобное.
Затем вставляете миниатюры в запись, а в поле ССЫЛКА указываете ссылку на полноразмерный файл, лежащий на внешнем серваке.
спасибо за оперативный ответ, в общем испытал, можно и миниатюры ложить на радикал и полноразмерные и оба одновременно, все работает. Испытания проводил на плагине http://lecactus.ru/2008/04/03/1951/ думаю и на вашем сработают оба варианты.
вот что огорчает, то что оба плагина не работают на всех темах.
А я и забыл, что WP позволяет тянуть графику откуда угодно… )
Насчет тем. Я как раз и писал этот плагин, чтобы его можно было легко адаптировать к ЛЮБОЙ теме.
По дефолту все работает только для "стандартных" тем, а для других надо адаптировать код установки класса thickbox в настройках плагина (нужно только базовое понимание jQuery).
Вот например Валерий (см. первые комментарии) адаптировал плагин для своей нестандартной темы.
я заметил, что вы помогаете адаптировать другие темы, вот как время появится буду вам мозг «ломать» если не получится сделать по выше описанным советам. )))
И еще всплыл один вопрос – а как отключить «всплывание» для некоторых изображений?
Очень просто!
Изменить код для установки класса 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="http://www.q2w3.ru/wp-includes/js/thickbox/thickbox.js?ver=3.1-20091124"></script>
<script type="text/javascript">var tb_pathToImage = "http://www.q2w3.ru/wp-includes/js/thickbox/loadingAnimation.gif";var tb_closeImage = "http://www.q2w3.ru/wp-includes/js/thickbox/tb-close.png";</script>
http://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
Валерий, изображение вставляются как обычно. Сделал скриншот. См. выше.