HostCMS 5: Картинка в тексте с lightbox

Aug 21, 2012 23:18

Мы хотим чтобы в тексте у нас была картинка, которая открывается в lightbox по клику.
Такая функция не встроенна в систему по умолчанию.
Доработаетм под себя макет и шаблон системы, а также настройки TinyMCE.

1. Изменим макет страницы и шаблон.
Картинок может быть много потому вариант с id="#gallery" не подойдет.
В xsl шаблоне заменим
id="gallery"
на
class="lightbox"

В макете заменим строку скрипта

$('#gallery a:has(img)').lightBox();на

$('.lightbox').lightBox();

2. Добавим настройку для TinyMCE.
Чтобы задать новый параметр tiny_mce добавим в настройки строку 2:
theme_advanced_resizing : true, theme_advanced_styles : 'Ссылка на картинку=lightbox', theme_advanced_toolbar_align : 'left' Как использовать?
  1. Вставляем картинку миниатюру
  2. Выделяем ее и вставляем ссылку на большое изображение, указываем подпись к ссылке.
  3. Выбираем Class "Ссылка на картинку"
В итоге получиться Html-код вида:
class="lightbox" title="Image Link Title">


На странице вы увидите миниатюру, при клике на которую откроется увеличенная картинка c подписью Image Link Title.
Если картинок несколько, то возможно будет пролистывать их в lightbox.

веб-разработка, заготовки, hostcms, hostcms5, работа

Previous post Next post
Up