Автоматический эффект lightbox для всех картинок из контента (by fancybox)

Сегодня мы поговорим о том, как вставлять картинки с эффектом lightbox через поля типа "wysiwyg".
Часто, при написании контента (статей, новостей, теста о компании) вам требуется вставить в текст картинку или несколько картинок. При этом, дать возможность посетителю сайта посмотреть увеличенную версию данной картинки, во всплывающем окне (lightbox эффект). В большинстве случаев, такие вещи реализуются через отдельное поле, в котором вы можете задать картинку. А разработчик шаблона сайта может вывести эту картинку специальным образом, с эффектом lightbox. Но такие вопросы хорошо решать в процессе создание сайта, а мы поговорим о том, как сделать это через админку при минимальными изменениями в шаблоне.

Этот код будет особенно полезен если вам:

  • Надо разместить фотогалерею на странице, при том что у вас нет модуля «Фотогалереи»
  • Хочется избежать необходимости, заставлять пользователя прикреплять фотографии через другой фотоальбом связанный с этой страницей
  • Хочется обойтись без создания дополнительных полей на этой страницы для прикрепления фотографий
  • Хочется чтобы ваши картинки на странице раскрывались lightbox

В результате мы должны получить механизм, позволяющий создавать вот такие картинки (нажмите на неё)

логотип UMI.CMS

Как создать такую картинку:

  1. При редактировании любого html поля, добавим картинку в область контента через кнопку «Вставить/редактировать изображение»
  2. добавим саму фотографию (если возникнут вопросы, cмотри тут Вставка изображений и тут Файловый менеджер)
  3. не закрывая окна "Вставить/редактировать изображение", перейдем на вкладку "Дополнительные" и в поле  "Код языка" укажем текст "lightbox".
    Это текст подскажет нашему скрипту (см. ниже), что данная картинка должна открываться с lightbox эффектом.
  4. не закрывая окна "Вставить/редактировать изображение" перейдем на вкладку "Оформление" и укажем уменьшенные размеры нашей картинки. Достаточно указать одно значение, второе высчитается автоматически.
    Так же вы можете изменять размер фотографии уже после вставки в html поле.
  5. сохраним наши изменения на странице

Все… больше ничего делать не надо, все остальное сделает скрипт.


Осталось только добавить тот самый скрипт, который все сделает за нас
Установка скрипта:

  1. Добавляем в шаблон необходимый нам скрипт.
    Стоит сказать, что добавлять скрипт лучше в сам шаблон (при необходимости, обратитесь к разработчику.). Также стоит упомянуть, что скрипт будет использовать функционал 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();
    	}
    });
  2. Разместим файл на хостинге. В моем примере это будет папка /tempaltes/demodizzy/js
  3. Подключим файл в шаблоне нашего сайта.
    <script type="text/javascript" src="/templates/demodizzy/js/autolightbox.js"> </script>
    Стоит упомянуть, что данное подключение стоит делать после загрузки самой jquery библиотеки и fancebox бибилиотеки, то есть после макроса (в случае TPL)
    %system includeQuickEditJs()%
    или (в случае XSLT)
    <xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes" />



comments powered by HyperComments