SEO простым языком

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Фотография 1
• Фотография 2
• Фотография 3

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

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

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

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

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