Lightbox для Blogger - галерея картинок

Крутой Lightbox для Blogger - галерея картинок

Что такое Lightbox?

Lightbox - это всплывающее окно в котором читатель может просматривать изображения постов. Очень удобная штука, особенно когда картинок в посте много и автор делает их небольшого размера. В таком случае Lightbox поможет просмотреть изображение в исходном размере. Обычно в блоге на Blogger отображается стандартное окно без каких либо особых функций. Примерно год тому назад я уже публиковал новый тип лайтбокса на Jquery. В данной публикации я покажу, как установить более новую версию с дополнительными функциями. В конце публикации есть видео, в нем можете посмотреть, как работает новая версия.

Как установить Lightbox в Blogger


1. Перейдите в раздел Тема.
2. Откройте редактор Изменить HTML.
3. Перед закрывающим тегом </body> вставьте код:

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[imageanchor]"});
//]]>
</script>

4. Для старых стандартных тем нужно найти строку:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Если у вас новые темы Blogger: Contemp, Soho, Notable, Emporio, тогда нужно найти следующею строку:

<div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>

Замените ее следующей строкой:

<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>

5. Сохраните тему и проверьте, как работает. Если новый лайтбокс не срабатывает подключите библиотеки Jquery. В открывшейся статье сморите пункт 1).

6. Финальный штрих. В разделе Настройки - Сообщения, комментарии и настройки доступа - Показывать изображения в Lightbox ? Да переключите на Нет.

Переходим к просмотру видео:



Поделиться в социальных сетях:
Facebook TwitterGoogle+ Vkontakte

Рекомендуем