2012-05-26

Эффект 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 ниже.
..

Как же включить или отключить эффект lightbox в блоге blogger. Для этого идем в админку вашего блога, далее Настройки –> Сообщения и комментарии –> Показывать изображения в Lightbox – если “да”, то включаем Lightbox, “нет” – выключаем эффект.
Однако далеко не всегда вы можете управлять эффектом используя лишь настройки в административной панели. Например, при использовании нестандартного шаблона, эффект lightbox часто не работает. В этом случае вы можете дописать специальные скрипты в редакторе html.
Как добавить lightbox с помощью JQuery кода?
Перейдите в редактор шаблона вашего блога –> Изменить HTML. С помощью Ctrl + F найдите отрезок кода
]]></b:skin>
Вставьте следующий код перед кодом ]]></b:skin>

Найдите в шаблоне html тег
</head>
и вставьте перед ним код:

Теперь для того,чтобы эффект lightbox работал к коду каждого изображения  добавим class="spicebox"
Для примера:
<a class="spicebox" title="описание" href="http://image.jpg"><img src="http://image.jpg"></a>

8 комментариев :

Окна комментирует...

Хороший эффект.+1

Алексей Сложеникин комментирует...

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

Mycrib комментирует...

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

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

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

Влад Сетла комментирует...

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

Иванова Наталья комментирует...

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

Apolinaria L. комментирует...

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

Иванова Наталья комментирует...

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

Иванова Наталья комментирует...

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

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

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML