LightBox для Blogger или красивое решение для фотографий

Доброго времени суток, уважаемые читатели. Уверена, эта статья пригодится каждому, особенно тем блоггерам, основным контентом которых являются фотографии. Сегодня я расскажу вам, как на блоге Blogger/Blogspot сделать красивую галерею фотографий LightBox. Кто ещё не знает, что это за галерея, кликаем по фотографии. Все изображения в этой статье кликабельны. Если вы читаете из своих ридеров или почты, то перейдите на статью в блоге.

Галерею LightBox можно сделать двумя способами:

с использованием JavaScript
с помощью специальной библиотеки JQuery, что по сути является продолжением JavaScript.

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

Открываем Дизайн – Изменить HTML, находим строчку </head>. Перед этой строкой вставляем код или из первого файла или из второго. Лично у меня в шаблоне сейчас стоит код из второго файла. А на своем тестовом блоге я проверяла оба кода и оба работали. Сохраняем шаблон.

Итак, остальное дело техники. Как обычно пишем статью, вставляем картинки. Когда пост готов к публикации, из визуального редактора переходим на вкладку Изменить HTML. Находим код своих картинок. Он имеет такой вид:

Голубым выделена ссылка, которая ведет на вашу фотографию в веб-альбоме Picasa. Нам необходимо в конец первой части ссылки вставить параметр: rel="lightbox" и заголовок фотографии title="Ромашка". Весь код примет такой вид:

Посмотрите, новый код rel="lightbox" и title="Ромашка" я выделила красным. Он находится внутри первого тега ссылки перед закрывающей скобкой >.

В принципе, его можно вставить и в начало ссылки или сразу после адреса картинки, главное, не разорвать уже существующий код. Все. Фотография для галереи готова. Правда, очень просто?

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

Как это сделать? Придумываем название своему альбому, например, в моем случае альбом будет называться "Ромашки". В таком случае параметр rel="lightbox" должен иметь такой вид: rel="lightbox[Ромашки]". Именно в таком виде всем фотографиям, которые относятся к одному альбому, прописываем rel. Таким образом в одной статье можно реализовать сразу несколько разных альбомов. Поэтому, я решила немного уделить внимание тому, как можно сэкономить место в статье, чтобы картинки были маленькими, а открывались большими.

Для начала, уменьшаем все картинки. В Blogger по умолчанию самый маленький размер картинки 150px по высоте, а ширина выставляется автоматически, чтобы сохранялась пропорция. Но мы хотим сделать наши картинки ещё меньше. Поэтому находим все тот же код картинки на вкладке Изменить HTML. После того, как вы указали самый маленький размер картинки на вкладке визуального редактора "Создать", код самой картинки (без ссылки) будет иметь такой вид:

Нас интересует высота картинки height="150" и ширина картинки width="200". Тут вы самостоятельно должны прикинуть пропорции ваших изображений. И внести новые значения для картинки, исходя из ее размеров, и ширины поля поста. Так же учитывайте, что дизайном шаблона между картинками предусмотрены поля.

Например, чтобы в моем новом шаблоне сделать 4 фотографии в ряд, я вычислила, что примерная ширина картинки должна быть width="120", а чтобы сохранилась пропорция изображения, высоту указываю height="90". Я думаю, каждый блоггер обрабатывает свои фотографии в каком либо редакторе, вот с его помощью и узнаем пропорции.

Итак, картинки подогнали, но они, как стояли в ряд, так и остались. Причина этому контейнер, в котором находится каждая картинка.

Если вы посмотрите внимательно код, который окружает непосредственно код картинки с ссылкой, то увидите, что каждое изображение находится в своем контейнере <div></div> Так же может стоять тег перевода строки <br /> (может и не быть, зависит от настроек блога). Вот как это выглядит в коде:

Желтым я выделила контейнер <div></div>, а голубым разрыв строки <br />. Все это удаляем. И что важно, все делаем без пробелов. Должен получиться сплошной код без разрыва.

Я специально выделила каждый код разным цветом, подчеркнув тем самым, что все должно быть без разрыва. Но, можно между каждым блоком кода ставить обычный пробел, главное не делать перевод строки. Проделав все это получаем красивый блок из маленьких фотографий.

Давайте теперь рассмотрим вариант, когда хочется поместить фотографии, но при этом не хочется сразу показывать миниатюры, а создать эффект неожиданности. Вот как это можно сделать:

Итак, как добиться такого эффекта? Ничего сложно в этом нет. Вспомним, как выглядит наш код картинки:

Убираем полностью из этого кода все, что выделено зеленым, т.е. код только одной картинки, и в этом месте пишем нужное слово, например: Фотография 1. Вот так должно получиться:

Хочу обратить внимание тех, кто пользуется редактором блогов. В принципе, можно менять код и в самом редакторе. Только адреса картинок в нем выглядят немного иначе. Но уловив суть, вам не составит труда вносить изменения. Но после того, как вы отправите сообщение в блог, в коде картинок появится два лишних символа, которые необходимо удалить. Если не удалить, то LightBox работать не будет.
Итак, вот код изображения, загруженного с помощью редактора блогов:

Не очень удачно опубликовалось, необходимо удалить то, что я выделила красным цветом -h (тире и букву h), и все заработает.

Ещё небольшое замечание, я столкнулась с тем, что удалив у картинок контейнер, чтобы выстроить их в один ряд, они оставались в прежнем виде. Чтобы это исправить, удалите внутри кода фотографии два параметра стиля:

display: block; float: none;

Итак, теперь в своем блоге мы имеем красивую галерею, и умеем по разному оформлять свои посты в блоге.
Удачи в развитии.

P.S. Как оказалось, мой скрипт в блоге работает немного иначе, сразу показывая все фотографии , которые находятся в одном посте, независимо от того, к какому альбому они принадлежат.