Рубрики
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. Открытие изображений во всплывающем окне”

Отличный плагин. Аккуратный, удобный и приятно-восприимчив. Филипп мил.

Благодарю, автор!

Автору большое спасибо,но если ты меня еще слышишь подскажи пожалуйста! Взял здесь плагин Q2W3 Fixed Widget,закинул виджет все отлично,но теперь при использование плагина Q2W3 Thickbox,виджет выходит на передний план,а картинку под ним, т.е. они налазят друг на друга,как бы это исправить?(уменьшение изображения будет нецелесообразно)

Надо посмотреть, что у тебя в стилях контейнера виджета.
По идее тебе надо уменьшить значение z-index.
Попробуй поставить 100 или 0.

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

После некоторых изменений в движке изображения выводятся отдельной картинкой в текущем окне.
Плагин установил удалил и установил заново. Но всё также.
Пример тут http://whatsup.su/chastnye-foto-devushek-3/

Здравствуйте Админ.

Я вам задавал вопрос как прикрепит изображение к комментарию.
Путем проб и ошибок, я добился все таки добавлять картинки в комментарии с последующим отображении в сплывающем окне с помощью вашего плагина Q2W3 Thickbox.

Для добавления в комментарии изображений, скачал и установил плагин comment-image версия Version: 1.0.7

После вставки изображений с помощью этого плагина изображения открывались не в сплывающем окне.

Что сделал:

Отрыл файл plugin.php который находится в папке плагина comment-image

Нашел строку..

$comment .= '<p><a href="' . $url . '/wp-content/comment-image/' . commentimage_find_original($id, $i) . '"><img src="' . $url . '/wp-content/comment-image/' . $id . ($i==0?'':('-'.$i)) . '-tn.jpg"/></a></p>';

Заменил ее на..

$comment .= '<p><a class="thickbox" href="' . $url . '/wp-content/comment-image/' . commentimage_find_original($id, $i) . '"><img src="' . $url . '/wp-content/comment-image/' . $id . ($i==0?'':('-'.$i)) . '-tn.jpg"/></a></p>';

Все заработало.

Вот пример как работает http://svapka.ru/blokpoluavtov/delaem-toroidolnyj-svarochnyj-transfarmator.htm 371 комментарий.

В качестве благодарности за плагин, хочу установить ссылку на главной странице на ваш сайт.

Напишите пожалуйста текст ссылки.

Приветствую!
PHP-код можно вставить вот так:

[php]<?php echo "php-код" ?>[/php]

Обычный текст:

[plain]обычный "текст"[/plain]

Насчет ссылки – большое спасибо. Текст? Даже не знаю… ) Если можно, то “Сайты на WordPress” и ссылка на https://www.q2w3.ru/%d1%81%d0%b0%d0%b9%d1%82%d1%8b-%d0%bd%d0%b0-wordpress/

Как русифицировать слова “Image XX of XX <Prev Next>” на русские “Изображение XX из XX <- Назад Далее ->” ?

По-моему начиная с WP 2.9 русификация сделана на уровне движка. Так что нужно только обновить WordPress.

Вот этот код отвечает за русификацию:

<script type='text/javascript'> 
/* <![CDATA[ */
var thickboxL10n = {
	next: "Далее &rarr;",
	prev: "&larr; Назад",
	image: "Изображение",
	of: "из",
	close: "Закрыть",
	noiframes: "Эта функция требует поддержки плавающих фреймов. У вас отключены теги iframe, либо ваш браузер их не поддерживает."
};
try{convertEntities(thickboxL10n);}catch(e){};
/* ]]> */
</script> 

Программер посоветовал мне не обновлять текущую версию 2.8.6.
Хотя уже 3.0.4 вышла.  Или всё таки можно попробовать обновится ?
Тот код что вы процитировали просто сам добавится при обновлении ?

>Программер посоветовал мне не обновлять текущую версию 2.8.6.
Вообще так долго не обновляться – это риск.

>Или всё таки можно попробовать обновится?
Попробовать можно, но только предварительно сделав полный бэкап.

>Тот код что вы процитировали просто сам добавится при обновлении?
Да.

Если же решите не обновляться, то этот код можно вставить в футер с помощью вот этого плагина – https://www.q2w3.ru/2009/12/08/921/
Единственно вместо стрелок надо указать их код: & rarr; и & larr; (пробел после & убрать)

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

Попробуй добавить вот такой код к уже существующему:
jQuery(‘.commenter a img’).parent(‘a’).addClass(‘thickbox’);
должно сработать.

Ну а насчет вставки картинки в комментарии. В Вордпрессе это пока можно осуществить только на уровне html. Лично я картинки в комменты не вставляю, при необходимости просто даю ссылку на изображение.

сижу вот экспериментирую с плагином кактуса…пока все кроме одного работают с темами, перепробовал порядка 10 тем, темы брал обычные с паблика. Пробовал все на денвере, может на нормальном хосте и не пойдут…хотя не должно такого быть.

В контексте данного плагина могу сказать, что ему все равно откруда грузить изображения. К сожалению thickbox грузит страницы/изображения только если они находятся на том же домене, что и страница инициализирующая thickbox… Так что увы… изложенный ниже вариант не сработает.

Т.е. возможен такой вариант:
На свой WP-сайт закачиваете легкие миниатюры изображений. Большие полноразмерные файлы закачиваете на радикал или что-то подобное.
Затем вставляете миниатюры в запись, а в поле ССЫЛКА указываете ссылку на полноразмерный файл, лежащий на внешнем серваке.

спасибо за оперативный ответ, в общем испытал, можно и миниатюры ложить на радикал и полноразмерные и оба одновременно, все работает. Испытания проводил на плагине http://lecactus.ru/2008/04/03/1951/ думаю и на вашем сработают оба варианты.
вот что огорчает, то что оба плагина не работают на всех темах.

А я и забыл, что WP позволяет тянуть графику откуда угодно… )
Насчет тем. Я как раз и писал этот плагин, чтобы его можно было легко адаптировать к ЛЮБОЙ теме.
По дефолту все работает только для "стандартных" тем, а для других надо адаптировать код установки класса thickbox в настройках плагина (нужно только базовое понимание jQuery).
Вот например Валерий (см. первые комментарии) адаптировал плагин для своей нестандартной темы.

я заметил, что вы помогаете адаптировать другие темы, вот как время появится буду вам мозг “ломать” если не получится сделать по выше описанным советам. )))

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

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