Выкладываю свой собственный плагин для открытия изображений во всплывающем окне без перезагрузки страницы.
Содержание:
- Системные требования
- Установка
- Особенности
- Как вставить изображение
- Демонстрация работы
- Скачать плагин
- 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. Открытие изображений во всплывающем окне”
Отличный плагин. Аккуратный, удобный и приятно-восприимчив. Филипп мил.
Благодарю, автор!
Автору большое спасибо,но если ты меня еще слышишь подскажи пожалуйста! Взял здесь плагин Q2W3 Fixed Widget,закинул виджет все отлично,но теперь при использование плагина Q2W3 Thickbox,виджет выходит на передний план,а картинку под ним, т.е. они налазят друг на друга,как бы это исправить?(уменьшение изображения будет нецелесообразно)
Надо посмотреть, что у тебя в стилях контейнера виджета.
По идее тебе надо уменьшить значение z-index.
Попробуй поставить 100 или 0.
Здравствуйте у меня проблема если я сделаю запись как галерею то у меня при нажатии на картинку открывается это чудо, вместо того чтобы перейти на страницу
А есть ссылка? Надо глянуть что происходит…
После некоторых изменений в движке изображения выводятся отдельной картинкой в текущем окне.
Плагин установил удалил и установил заново. Но всё также.
Пример тут http://whatsup.su/chastnye-foto-devushek-3/
Похоже, что у вас конфликт со скриптом, отвечающим за эффекты в главном меню (ddsmoothmenu.js)
Здравствуйте Админ.
Я вам задавал вопрос как прикрепит изображение к комментарию.
Путем проб и ошибок, я добился все таки добавлять картинки в комментарии с последующим отображении в сплывающем окне с помощью вашего плагина 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-код можно вставить вот так:
Обычный текст:
Насчет ссылки — большое спасибо. Текст? Даже не знаю… ) Если можно, то «Сайты на 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: "Далее →", prev: "← Назад", 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; (пробел после & убрать)
Спасибо за оперативные ответы
После большого наплыва комментариев возник следующий вопрос.. как вставить картинку в комментарий, что бы открывалась также. Не получается, открывается как простое изображение в новом окне, помогите пожалуйста.
Здравствуйте, я задавал вам уже вопрос по сайту svapka.ru
Привет! А дай ссылку на коммент с картинкой, я посмотрю как видоизменить код.
http://svapka.ru/raznoe/rasschet-transformatora-dlya-svarochnogo-poluavtomata-svarochnogo-apparata.htm
81 комментарий.
Еще.. в редакторе при отправке комментария нет вставки картинки, я просто ее сначала вставляю в запись, потом этот код вставляю в комментарий.
Попробуй добавить вот такой код к уже существующему:
jQuery(‘.commenter a img’).parent(‘a’).addClass(‘thickbox’);
должно сработать.
Ну а насчет вставки картинки в комментарии. В Вордпрессе это пока можно осуществить только на уровне html. Лично я картинки в комменты не вставляю, при необходимости просто даю ссылку на изображение.
Ок.. попробую. Просто думал что ваш плагин может сам делать автоматом.
сижу вот экспериментирую с плагином кактуса…пока все кроме одного работают с темами, перепробовал порядка 10 тем, темы брал обычные с паблика. Пробовал все на денвере, может на нормальном хосте и не пойдут…хотя не должно такого быть.
а можно сделать так, чтоб все картинки например на радикале хранились?
В контексте данного плагина могу сказать, что ему все равно откруда грузить изображения.К сожалению thickbox грузит страницы/изображения только если они находятся на том же домене, что и страница инициализирующая thickbox… Так что увы… изложенный ниже вариант не сработает.Т.е. возможен такой вариант:
На свой WP-сайт закачиваете легкие миниатюры изображений. Большие полноразмерные файлы закачиваете на радикал или что-то подобное.
Затем вставляете миниатюры в запись, а в поле ССЫЛКА указываете ссылку на полноразмерный файл, лежащий на внешнем серваке.
спасибо за оперативный ответ, в общем испытал, можно и миниатюры ложить на радикал и полноразмерные и оба одновременно, все работает. Испытания проводил на плагине http://lecactus.ru/2008/04/03/1951/ думаю и на вашем сработают оба варианты.
вот что огорчает, то что оба плагина не работают на всех темах.
А я и забыл, что WP позволяет тянуть графику откуда угодно… )
Насчет тем. Я как раз и писал этот плагин, чтобы его можно было легко адаптировать к ЛЮБОЙ теме.
По дефолту все работает только для "стандартных" тем, а для других надо адаптировать код установки класса thickbox в настройках плагина (нужно только базовое понимание jQuery).
Вот например Валерий (см. первые комментарии) адаптировал плагин для своей нестандартной темы.
я заметил, что вы помогаете адаптировать другие темы, вот как время появится буду вам мозг «ломать» если не получится сделать по выше описанным советам. )))