Эффект Lightbox для Blogger

lightbox

Изменено 5.02.2014 Внимание! Скрипт в статье устарел, в дальнейшем я статью подправлю несколько позже. В этом блоге есть 2 свежих статьи по теме:

  1. Не работает lightbox в blogger
  2. Lightbox blogspot css (меняем оформление)

Содержание статьи: 

  1. Что такое Lightbox
  2. Как включить / выключить lightbox в blogger
  3. Использование lighbox в блоге blogger с нестандартным шаблоном.

Что такое Lightbox

Lightbox – это специальный скрипт, при помощи которого создается в блоге галерея из фотографий. Выглядит это следующим образом – когда вы вставляете в запись блога фотографии, то они отображаются в ней в виде миниатюр, при нажатии на которые они открываются в оригинальном размере поверх окон браузера без перенаправления на другую страницу, что очень удобно. Текущая же страница при просмотре изображений будет покрыта полупрозрачным темным фоном. Вы можете не выходя из этого режима просмотреть все изображения, находящиеся на странице. Достаточно лишь кликать по правому краю фотографий. Для того, чтобы закрыть фото, кликните по иконке закрыть в нижнем правом углу.
Как же включить или отключить эффект lightbox в блоге blogger. Для этого идем в админку вашего блога, далее Настройки –> Сообщения и комментарии –> Показывать изображения в Lightbox – если “да”, то включаем Lightbox, “нет” – выключаем эффект.

Однако далеко не всегда вы можете управлять эффектом используя лишь настройки в административной панели. Например, при использовании нестандартного шаблона, эффект lightbox часто не работает. В этом случае вы можете дописать специальные скрипты в редакторе html.

Как добавить lightbox в Blogspot

Перейдите в редактор шаблона вашего блога –> Изменить HTML. С помощью Ctrl + F найдите отрезок кода

]]></b:skin>

Вставьте следующий код перед кодом ]]></b:skin>
/*start css lightbox*/ /** * jQuery lightBox plugin * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) * and adapted to me for use like a plugin from jQuery. * @name jquery-lightbox-0.5.css * @author Leandro Vieira Pinho - http://leandrovieira.com * @version 0.5 * @date April 11, 2008 * @category jQuery plugin * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin */ #jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; } #jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #jquery-lightbox a img { border: none; } #lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #lightbox-container-image { padding: 10px; } #lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #lightbox-container-image-box > #lightbox-nav { left: 0; } #lightbox-nav a { outline: none;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; } #lightbox-nav-btnPrev { left: 0; float: left; } #lightbox-nav-btnNext { right: 0; float: right; } #lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; } #lightbox-container-image-data { padding: 0 10px; color: #666; } #lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; } #lightbox-image-details-caption { font-weight: bold; } #lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; } #lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em; } /*end lightbox css*/
Найдите в шаблоне html тег

</head>

и вставьте перед ним код:
$(function() { $('a.spicebox') .lightBox({ overlayOpacity: 0.6, imageLoading: 'https://1.bp.blogspot.com/-E4eaouKn-VA/TdvW6y3ZZxI/AAAAAAAAEEM/6UHhujshJsg/s1600/lightbox-ico-loading.gif', imageBtnClose: 'https://2.bp.blogspot.com/-akpfLVo73Zk/TdvW4dmQALI/AAAAAAAAEEA/jn9ZWXFrYcI/s1600/lightbox-btn-close.gif', imageBtnPrev: 'https://3.bp.blogspot.com/-rWUtFwoKp3M/TdvW6VzTTpI/AAAAAAAAEEI/7afUa6r4H9Q/s1600/lightbox-btn-prev.gif', imageBtnNext: 'https://3.bp.blogspot.com/-LFX48wGyrqc/TdvW6Md87dI/AAAAAAAAEEE/1gec9BHuVuc/s1600/lightbox-btn-next.gif', containerResizeSpeed: 350, txtImage: 'Image', txtOf: 'Of' }); });
Теперь для того,чтобы эффект lightbox работал к коду каждого изображения  добавим class="spicebox"
Для примера:

<a class="spicebox" title="описание" href="http://image.jpg"><img src="http://image.jpg"></a>

8 ответов к «Эффект Lightbox для Blogger»

  1. убирается полоса прокрутки почему-то((( и страница после выхода из режима просмотра не прокручивается

  2. в настоящее время в blogger проблем с отображением lightbox.
    в некоторых случаях помогает решить проблему с lightbox добавление кода

    <script src='http://www.blogger.com/static/v1/jsbin/2321381434-lbx__fr.js&#39; type='text/javascript'/>

    в шаблон блога после тега </body> и перед </html>/

  3. Да нафиг такие заморочки нужны? Проще вставить скрипт в виджет и все! http://blogodel.com/2012/11/uluchennyj-lightbox-na-blogspot-blogger.html

  4. Влад, сейчас в Blogger отлично работает родной лайтбокс. Так что со скриптами вообще можно не заморачиваться, достаточно активировать лайтбокс в настройках Blogger и все.

  5. У меня нестандартный шаблон и инструкция к сожалению не работает(( То ли делаю что-то не так, то ли шаблон все блокирует.

  6. Apolinaria L, пришлите мне код шаблона через обратную связь. Попробую поэкспериментировать. Есть некоторые мысли.

  7. Apolinaria L, не нужно присылать шаблон. Разобралась в вашем шаблоне и так.
    Обязательно сделайте резервную копию шаблона!
    Зайдите в редакторе html шаблона вашего блога все коды post-header и замените их на post-body entry-content
    Удобно воспользоваться командой "Замена" в Notepad+
    Сохраните изменения.

    Сохраните изменения.

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

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