Выкладываю свой собственный плагин для открытия изображений во всплывающем окне без перезагрузки страницы.
Содержание:
- Системные требования
- Установка
- Особенности
- Как вставить изображение
- Демонстрация работы
- Скачать плагин
- 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)
Здравствуйте у меня проблема если я сделаю запись как галерею то у меня при нажатии на картинку открывается это чудо, вместо того чтобы перейти на страницу
А есть ссылка? Надо глянуть что происходит…
После некоторых изменений в движке изображения выводятся отдельной картинкой в текущем окне.
Плагин установил удалил и установил заново. Но всё также.
Пример тут 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» и ссылка на http://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.
Вот этот код отвечает за русификацию:
Программер посоветовал мне не обновлять текущую версию 2.8.6.
Хотя уже 3.0.4 вышла. Или всё таки можно попробовать обновится ?
Тот код что вы процитировали просто сам добавится при обновлении ?
>Программер посоветовал мне не обновлять текущую версию 2.8.6.
Вообще так долго не обновляться — это риск.
>Или всё таки можно попробовать обновится?
Попробовать можно, но только предварительно сделав полный бэкап.
>Тот код что вы процитировали просто сам добавится при обновлении?
Да.
Если же решите не обновляться, то этот код можно вставить в футер с помощью вот этого плагина — http://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).
Вот например Валерий (см. первые комментарии) адаптировал плагин для своей нестандартной темы.
я заметил, что вы помогаете адаптировать другие темы, вот как время появится буду вам мозг «ломать» если не получится сделать по выше описанным советам. )))
И еще всплыл один вопрос — а как отключить «всплывание» для некоторых изображений?
Очень просто!
Изменить код для установки класса 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>
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
Валерий, изображение вставляются как обычно. Сделал скриншот. См. выше.
Вот вы здесь вставили изображение в статью, а в комментарий покажите как на примере вашего сайта, то есть вставьте в комментарий.