Автоматический эффект lightbox для всех картинок из контента (by fancybox)
Сегодня мы поговорим о том, как вставлять картинки с эффектом lightbox через поля типа "wysiwyg". Часто, при написании контента (статей, новостей, теста о компании) вам требуется вставить в текст картинку или несколько картинок. При этом, дать возможность посетителю сайта посмотреть увеличенную версию данной картинки, во всплывающем окне (lightbox эффект). В большинстве случаев, такие вещи реализуются через отдельное поле, в котором вы можете задать картинку. А разработчик шаблона сайта может вывести эту картинку специальным образом, с эффектом lightbox. Но такие вопросы хорошо решать в процессе создание сайта, а мы поговорим о том, как сделать это через админку при минимальными изменениями в шаблоне.
Этот код будет особенно полезен если вам:
Надо разместить фотогалерею на странице, при том что у вас нет модуля «Фотогалереи»
Хочется избежать необходимости, заставлять пользователя прикреплять фотографии через другой фотоальбом связанный с этой страницей
Хочется обойтись без создания дополнительных полей на этой страницы для прикрепления фотографий
Хочется чтобы ваши картинки на странице раскрывались lightbox
В результате мы должны получить механизм, позволяющий создавать вот такие картинки (нажмите на неё)
Как создать такую картинку:
При редактировании любого html поля, добавим картинку в область контента через кнопку «Вставить/редактировать изображение»
не закрывая окна "Вставить/редактировать изображение", перейдем на вкладку "Дополнительные" и в поле "Код языка" укажем текст "lightbox". Это текст подскажет нашему скрипту (см. ниже), что данная картинка должна открываться с lightbox эффектом.
не закрывая окна "Вставить/редактировать изображение" перейдем на вкладку "Оформление" и укажем уменьшенные размеры нашей картинки. Достаточно указать одно значение, второе высчитается автоматически. Так же вы можете изменять размер фотографии уже после вставки в html поле.
сохраним наши изменения на странице
Все… больше ничего делать не надо, все остальное сделает скрипт.
Осталось только добавить тот самый скрипт, который все сделает за нас Установка скрипта:
Добавляем в шаблон необходимый нам скрипт. Стоит сказать, что добавлять скрипт лучше в сам шаблон (при необходимости, обратитесь к разработчику.). Также стоит упомянуть, что скрипт будет использовать функционал fancybox. Он используется по умолчанию в umi.cms, но если, по каким-то причинам, его нет, то стоит обратиться к разработчику сайта, с просьбой поставить его или использовать другой lightbox механизм, если таковые используются в вашем шаблоне. Я укажу, где именно нужно внести изменения в нашем js коде приложенном ниже, для использования другой lightbox js библиотеки.
Создадим файл autolightbox.js
jQuery(document).ready(function()
{
var i,
imgs=$("img[lang='lightbox']"),
imgs_count=imgs.length;
if (imgs_count>0) {
imgs.each(function(){
$(this).wrap('<a class="lightBox" href="'+this.src+'"></a>');
});
$('a.lightBox').fancybox();
}
});
Разместим файл на хостинге. В моем примере это будет папка /tempaltes/demodizzy/js
Стоит упомянуть, что данное подключение стоит делать после загрузки самой jquery библиотеки и fancebox бибилиотеки, то есть после макроса (в случае TPL)
