Показать описание изображения в Slimbox/Thickbox

В этой статье описывается, как изменить код системных файлов JoomGallery (начиная с версии 1.5.7 и выше), чтобы показать описание изображения рядом с заголовком в Slimbox и Thickbox. В следующих версиях компонента планируется включить эту функцию без редактирования кода в более удобном виде.

В JoomGallery 2.0 есть эта опция на вкладке «Настройки Frontend»>>»Функции всплывающих сообщений».

Общая информация:

После нажатия на миниатюрное изображение, оно отобразится в увеличенном виде с описанием.

Вот HTML пример для Slimbox:

<a title="Caption" href="/Link to larger image" rel="lightbox[joomgallery]">
   <img src="/Link to thumbnail" />
</a>

Для Thickbox:

<a title="Caption" href="/Link to larger image" class="thickbox">
   <img src="/Link to thumbnail" />
</a>

В обоих случаях к атрибуту «Название» будет добавлен атрибут «описание изображения». В версиях JoomGallery до 1.5.7 нужно было изменить лишь одну часть кода в файле «/components/com_joomgallery/helpers/html/joomgallery.php». А с версии 1.5.7 и выше это стало встроенно в шаблон, даже если slimbox не активно.

Обратите внимание, что при обновлении JoomGallery, все изменения кода будут перезаписаны на новые файлы. Не забывайте делать копии измененных файлов перед обновлением.

Пример названия категории Вы можете найти в файле по адресу «/components/com_joomgallery/views/category/tmpl/default_images.php». Откройте файл в соответствующем редакторе, например, Notepad ++. На 23 строке Вы видите признак ‘названия’.

<a title="<?php echo $row->imgtitle; ?>"

После изменения:

<a title="<?php echo $row->imgtitle.
' '.
htmlspecialchars($row->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

Функция ‘htmlspecialchars’ необходима для правильной работы со специальными знаками, такие как кавычки. Более подробно _http://www.php.net/manual/en/function.htmlspecialchars.php.

В этом примере заголовок, один пробел и описание изображения будут отображаться в одной строке. Если описание изображения вводится в редакторе Joomla, то Вы можете видеть в HTML коде окружающий тег ‘p’. Это выведет строки описания ниже заголовка. Это может вначале сбить с толку, поэтому его можно будет удалить.

Если Вам всегда нужна эта линия разрыва, то она находится тут:

<a title="<?php echo $row->imgtitle.
'<br />'.
htmlspecialchars($row->imgtext,ENT_COMPAT,'UTF-8');?>"

Дальнейший пример, чтобы показать «Заголовок: Описание»:

<a title="<?php echo $row->imgtitle.
': '.
htmlspecialchars($row->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

Сохраните файл в кодировке ‘UTF-8 без BOM’ с помощью Notepad++. Затем проверьте на сайте изменения. Если всё нормально, то Вам следует изменить все файлы шаблонов шаг за шагом.

Изменения в шаблонах

теперь нужно модифицировать все файлы шаблонов компонента JoomGallery. Не забывайте следить за результатом изменений на сайте.

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

Отображение категорий
Файл ‘/components/com_joomgallery/views/category/tmpl/default_images.php’
Строка 23

<a title="<?php echo $row->imgtitle.
' '.
htmlspecialchars($row->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

Подробное описание
Файл ‘/components/com_joomgallery/views/detail/tmpl/default.php’
Строка 19 (нажмите для подробного описания) и строка 105 (щелкните по увеличительному значку)

<a title="<?php echo $this->image->imgtitle.
' '.
htmlspecialchars($this->image->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

Избранные
Файл ‘/components/com_joomgallery/views/favourites/tmpl/default.php’
Строка 35
Тут Вы должны добавить к заголовку атрибут completely.

<a title="<?php echo $row->imgtitle.
' '.
htmlspecialchars($row->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

Просмотр поиска
Файл ‘/components/com_joomgallery/views/search/tmpl/default.php’
Строка 26

<a title="<?php echo $row->imgtitle.
' '.
htmlspecialchars($row->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

Каталоги просмотра
Файл ‘/components/com_joomgallery/views/toplist/tmpl/default.php’
Строка 28

<a title="<?php echo $row->imgtitle.
' '.
htmlspecialchars($row->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

‘Моя галерея’ — Предпросмотр изображения
Файл ‘/components/com_joomgallery/views/userpanel/tmpl/default.php’
Строка 93 (Нажать на ссылку изображения)

<a title="<?php echo $row->imgtitle.
' '.
htmlspecialchars($row->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

Для minithumb необходимо изменить в строке 1161 в файле ‘/components/com_joomgallery/helpers/html/joomgallery.php’.

$html .= '<a title="'.$img->imgtitle.
' '.
htmlspecialchars($img->imgtext, ENT_QUOTES, 'UTF-8').
'" href="'.$link.'">';

Расширения, которые могут показать Slimbox и Thickbox в действии, требуют изменений в интерфейсе JoomGallery.

Файл: ‘/components/com_joomgallery/interface.php’
Строки: 378/475/567
ниже этого кода добавить одну строку, вот результат:

$link .= ‘» title=»‘.htmlspecialchars($obj->imgtitle, ENT_COMPAT, ‘UTF-8’);
$link .= ‘ ‘.htmlspecialchars($obj->imgtext, ENT_COMPAT, ‘UTF-8’);

Свежие новости

Загрузка…


4 комментариев на “Показать описание изображения в Slimbox/Thickbox

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

  2. тоже не понимаю как это делать. как тут уже советовала, придется переходить на вордпресс

  3. вордпресс более упрощен, он подходит для новичков и тех кто не хочет лезть в код. джумла тоже хороша своим функционалом, но посложнее будет

  4. если в коде не понимаете то закрывайте этот сайт про джумлу и не грузитесь зря

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

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