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

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

Ромашка

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

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

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

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

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

<a href="http://2.bp.blogspot.com/-ADFXWf4fpww/TVa-dznvzsI/AAAAAAAABOI/JB-De0QeQB4/s1600/P1030594.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="//2.bp.blogspot.com/-ADFXWf4fpww/TVa-dznvzsI/AAAAAAAABOI/JB-De0QeQB4/s320/P1030594.JPG" width="320" /></a>
Голубым выделена ссылка, которая ведет на вашу фотографию в веб-альбоме Picasa. Нам необходимо в конец первой части ссылки вставить параметр: rel="lightbox" и заголовок фотографии title="Ромашка". Весь код примет такой вид:
<a href="http://2.bp.blogspot.com/-ADFXWf4fpww/TVa-dznvzsI/AAAAAAAABOI/JB-De0QeQB4/s1600/P1030594.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" rel="lightbox"  title="Ромашка"><img border="0" height="240" src="//2.bp.blogspot.com/-ADFXWf4fpww/TVa-dznvzsI/AAAAAAAABOI/JB-De0QeQB4/s320/P1030594.JPG" width="320" /></a>

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

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

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

Ромашка
P1030598
P1030587

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

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

<img border="0" height="150" src="//2.bp.blogspot.com/-ADFXWf4fpww/TVa-dznvzsI/AAAAAAAABOI/JB-De0QeQB4/s320/P1030594.JPG" width="200" />

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

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

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

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

lightbox-galereya
Желтым я выделила контейнер <div></div>, а голубым разрыв строки <br />. Все это удаляем. И что важно, все делаем без пробелов. Должен получиться сплошной код без разрыва.
sozdanie-galerei
Я специально выделила каждый код разным цветом, подчеркнув тем самым, что все должно быть без разрыва. Но, можно между каждым блоком кода ставить обычный пробел, главное не делать перевод строки. Проделав все это получаем красивый блок из маленьких фотографий.

LightBox галерея. Фото 1 LightBox галерея. Фото 2 LightBox галерея. Фото 3 LightBox галерея. Фото 4

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

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

<a href="http://2.bp.blogspot.com/-ADFXWf4fpww/TVa-dznvzsI/AAAAAAAABOI/JB-De0QeQB4/s1600/P1030594.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" rel="lightbox"  title="Ромашка"><img border="0" height="240" src="//2.bp.blogspot.com/-ADFXWf4fpww/TVa-dznvzsI/AAAAAAAABOI/JB-De0QeQB4/s320/P1030594.JPG" width="320" /></a>
Убираем полностью из этого кода все, что выделено зеленым, т.е. код только одной картинки, и в этом месте пишем нужное слово, например: Фотография 1. Вот так должно получиться:
<a href="http://2.bp.blogspot.com/-ADFXWf4fpww/TVa-dznvzsI/AAAAAAAABOI/JB-De0QeQB4/s1600/P1030594.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" rel="lightbox"  title="Ромашка">Фотография 1</a>.

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

<a href="http://lh6.ggpht.com/_G92voTj-yF0/TVbjxAIHeII/AAAAAAAABPE/XCSKPt-B6CY/s1600-h/P1030594%5B3%5D.jpg" rel="lightbox" title="Ромашка"><img alt="Ромашка" border="0" height="229" src="//lh6.ggpht.com/_G92voTj-yF0/TVbjxjwRt2I/AAAAAAAABPI/u8Uyw4HNfFU/P1030594_thumb%5B1%5D.jpg?imgmax=900" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; margin-left: auto; margin-right: auto;" title="Ромашка" width="304" /></a>

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

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

display: block; float: none;

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

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


Запись опубликована автором в рубрике Как создавать сайты с метками .

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

  1. SwaEgo

    Отличная штука,лайтбоксы.Я на свой фотоблог сразу почти поставил.
    У тебя кстати картинки прелоадера нет.

  2. Евгений

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

  3. Ilya Kochnev

    Сама часа три назад клиенту ставил Лайтбокс — лёгко и просто)
    Осталось допилить, чтобы курсор при наведении на Zoom’овидный менялся)

  4. SEO-Дилетант'ка

    @Rusfetische Здесь не обсуждались ссылки с картинок, сносить их или нет. Здесь рассказывается о красивом решении для фотографий. Не все блоги торгуют ссылками, и многие размещают большие фотографии для своих читателей.

  5. SEO-Дилетант'ка

    Я не пробовала, но логичней это должно было бы выглядеть так: rel=»lightbox» rel=»nofollow». Только я ни разу не встречала ссылки с двумя параметрами rel:)).

  6. Ilya Kochnev

    С двумя параметрам rel ссылки есть и делаются как раз так, как я выше написал. Сегодня протестирую, посмотрю, будет ли работать )

  7. fobosss

    ОЧень полезно и красиво….а еще красиво….когда такую статью пишет барышня!..Спасибо и с праздником!

  8. incasualnotes

    Спасибо за свежее решение! Вот только я не сразу понял в чем суть этого lightbox, потому как на основном лэптопе за котором я работаю — все картинки были не кликабельными. Поэтому я даже хотел задать вопрос о том, что дает «галерея lightbox»? Но зайдя с другого компьютера по этой статье все понял… очень красиво. Может быть подскажите, в чем может быть проблема, хоть это уже вопрос в оффтопик.

  9. Vlad Igolkin

    В продолжении к комментарию incasualnotes. У меня почему-то не кликабельны картинки и на других компьютерах (провел тест на 3 -х разных) и в других браузерах в основном в Chrome, но если смотреть в IE при нажатии на картинку вообще пишет «ошибка страницы».

  10. SEO-Дилетант'ка

    Точно я не могу сказать, но одной из причин могут быть настройки браузера — отключен JavaScript, либо настройки защиты компьютера — антивирус, файрвол, может ещё что-то в этом духе. Я так же проверяла на двух компьютерах (настолько ПК и ноутбук) проблем нет.

  11. Aлина

    Екатерина, добрый вечер!
    Может я со своим вопросом здесь не по теме, но относиться он к фотографии. Когда я хочу взять ссылку на фотографию в Picasa, то у меня ссылка начинается с https (но это секретный код, так мне подсказали) и я никак не могу получить ссылку, что использовать это изображение. У Вас же как я вижу ссылка начинается с http. Надеюсь Вы понимаете о чём я говорю. В чём может быть проблема?

  12. Anna

    спасибо за статью — очень помогла. а вот интересно, можно ли что-то подобное сделать с видео? и как это сделать?

  13. SEO-Дилетант'ка

    Именно этот впособ для видео не подойдет, но, уверена, для видео тоже можно придумать интересное решение. Например, у меня в блоге есть одно интересное решение для видео. Вот эту статью http://amateurblogger.ru/2011/01/kak-sdelat-menu-vkladki-tab-menu.html я писала именно для видео.

  14. incasualnotes

    Подскажите,как обойти конфликт между jquery.min.js (используемый для «табов» в видео) и prototype.js (используемый для lightbox галереи). Потому как одновременно они работают.

  15. SEO-Дилетант'ка

    Обойти конфликт можно только одним способом — заменить скрипт. Я в статье выложила два разных скрипта. Если ни один из них не подходит, то, во-первых, перепроверьте, все ли правильно вы делаете, во-вторых, поищите через поисковик другой скрипт. Я сама скрипты не пишу, выложила в статье скрипты, которые нашла через Google на иностранных блогах, посвященных Blogger. Попробуйте и вы поискать.

  16. incasualnotes

    Спасибо! Пробовал использовать два кода. К сожалению подходил только первый. Но как я написал выше, хоть скрипт и работал, он вступал в конфликт с jquery.
    Решил вопрос через jQuery.noConflict() Теперь все работает как надо.

  17. Anna

    спасибо. читала эту статью, но наверное не совсем то, что мне нужно. боюсь, что в таком случае посетители просмотрят только 1-ю вкладку 🙁

  18. SEO-Дилетант'ка

    Возможно, в вашем случае этот вариант и не подойдет. С другой же стороны, почему думаете, что люди не будут смотреть другие вкладки, если это интересно?

  19. SEO-Дилетант'ка

    А вы у них и спросите:). Эти же скрипты не я придумала, а другие блоггеры, которые и выложили их на своих блогах именно в таком виде.

  20. Oleg Abramov

    Почему-то Ad-block блокирует скрипт, которым вы пользуетесь.
    Тем временем лайтбокс сайта vkontakte он не блокирует.

    Adblock имеет широкую аудиторию, поэтому мне важно, чтобы он не блокировал такого рода скрипты в моём блоге. Буду тестить )
    Спасибо за статью!

  21. Oleg Abramov

    Первый скрипт имеет открытый код и ссылки, по которым можно скачать js файлы, поправить их на свой вкус (например «Image 1 of 5» выводить как «Изображение 1 из 5») и залить на свой хостинг. Тоже самое касается и изображений Next, Previous и т.п.

  22. SEO-Дилетант'ка

    Oleg, во-первых, посмотрите, в статье выложено два скрипта, во-вторых, моно поискать и другие решения. Например, лайт бокс можно попробовать сделать только с помощью CSS. Конечно эффект менее красивый, но зато вообще без скриптов.

  23. Alex Borovsky

    спасибо, очень пригодилось
    вот у меня все уменьшенные фотографии имеют различное разрешение (H200 W144 или H200 H132 и т.п.) есть возможность возможность чтобы в блоке из уменьшенных фотографий показывалась не вся фотография, а только ее часть допустим 100 на 100?

  24. SEO-Дилетант'ка

    Теоретически, думаю, это можно сделать. Надо прописать стили для уменьшенных картинок, чтобы они не уменьшались, а обрезались. стили — это CSS, прописывается в шаблоне блога.

  25. Svetlana

    Статье 2 месяца, а я только сегодня ее увидела, какая досада. Все установила, все работает, красота. Спасибо!

  26. Kagan ***

    Здравствуйте! А как можно уменьшить размер самого всплывающего окошка. Дело в том что фотографии в высоком разрешении и на экран выводится только половина, чтобы увидеть остальное, приходится пролистывать вниз, а это неудобно.

  27. SEO-Дилетант'ка

    Вообще окошко всегда подгоняется под размер картинки. Какого размера картинка, такого и окошко. Поэтому, может лучше уменьшать размер картинки без потери качества? В любом случае, в окошке или нет, большую картинку неудобно смотреть в окне браузера.

  28. korferon

    Получается, что кроме как изменения размера картинки нет способов, чтобы картинка во всплывающем окне была меньше оригинала? А то уж очень не удобно. Ни как нельзя сделать так, чтобы всплывающее окно автоматом подгонялось под разрешения рабочего стола? 

  29. SEO-Дилетант'ка

    Может и есть, но мне этот способ не известен. И даже никогда такого не придумала бы. Это не логично. Логично, когда фотография публикуется такого размера, чтобы она была удобна посетителям для просмотра, независимо от экрана монитора, т.е. максимальный размер (примерно) не больше 1000px в ширину и не более 800px в высоту.
    Если же следовать вашей логике, то когда вы НЕ пользуетесь лайтбоксом и пользователю приходится прокручивать ваше изображение — это нормально, а если приходится прокручивать изображение в лайтбоксе, то это неудобно. Или я все таки не правильно понимаю ваш проблему?

  30. Kubig

    Так, теперь странный вопрос… Раньше Я css и js файлы хранил на site.google.com, но после того как приделал к блогу домен второго уровня, эти файлы c site.google.com перестали открываться, отсюда вопрос, где Я могу без палева и бесплатно хранить эти css и js файлы?

  31. SEO-Дилетант'ка

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

  32. LIon

    Добрый день. Вы написали в P.S. что скрипт показывает сразу все фотографии. А это можно какнибуть обойти? Чтобы показывал исходя от того к какому альбому относятся фотографии.

  33. Стасik

    как сделать, чтобы когда происходит анимация, то есть открывается полноразмерное фото — были определенные граничения на размеры, например как на сайте vkontakte.ru? а то открываются очень большими фотографии и никак не уменьшить, если только масштаб самой страницы уменьшать:(

  34. SEO-Дилетант'ка

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

  35. Стасik

    Ясно, спасибо за ответ.
    Но у меня есть ещё вопрос по поводу лайтбокса: когда открываются фото, вокруг темный фон и только стрелочки на фото да кнопка Close. А вы не знаете, как сделать чтоб ещё и окошко для комментариев было внизу открыто? (вроде того, как на Вконтакте)

    P.S.Если бы Вы оставили свой ящик или аську или скайп — было бы значительно быстрее и проще общаться, если Вы не против помочь начинающим. Мои контакты, на случай, если все-таки согласитесь помочь более оперативно решать вопросы: аська: 463851232, скайп: tazik-9, мыло: tazik9gmail .com
    Стас.

  36. Dmitriy Kustov

    Ничего не получается ((( Перед самой первой строкой «head» нужно вставлять скрипт или под какой-то определённой? + код изображения в «Изменить HTML сообщения» у меня не такой, как здесь. Что делать? Заранее спасибо.

  37. SEO-Дилетант'ка

     В статье написано: Открываем Дизайн – Изменить HTML, находим строчку
    Если у вас находится внутри строки, т.е. на этой строчке есть ещё какой-то код, то вставляем точно перед скобкой со слешем Код изображений на всех сайтах выглядит одинаково, т.к. для этого существуют стандарты. Но, естественно, где-то он может отличаться. Вам просто нужно понимать, как вообще выглядит код изображений и код ссылок на языке HTML.
    Возможно, вы воспринимаете его иначе, потому что у ваших картинок нет ссылки (я через твитер заходила на блог dee23shop). Вообще, Blogger все картинки вставляет вместе с ссылкой на полное изображение. Ваше изображение не имеет ссылки, я так понимаю, вы ее удаляете, возможно пользуетесь редактором блогов (не знаю, вы слишком мало оставили информации). Так вот ни один лайтбокс не сможет открывать полноразмерное изображение, если не прописать ему ссылку.

  38. illusiveartgames

    В общем на днях установил PrettyPhoto очень хорошая вещь, намного лучше
    LightBox, потому что умеет показывать не только картинки, но и видеоролики с youtube, flash и прочее, а ещё может показывать уменьшенную версию картинки, однако я не смог разобраться как поменять skin окна, т.е цветовую схему, потому что там есть не только белая рамка, но и чёрная, полупрозрачная и т.д. Не могли бы вы подсказать? 

  39. Наталья Каширина

    много слышала про этот комопнент, или галерею, незнаю как правильно сказать. Спасибо за статью очень интересно. Я только начинающий блогер и ваш сайт для меня просто находка.

  40. Иллюзия

    Большое спасибо!!!
    Первый вариант, отлично работает на шаблоне «Водяной знак»!

  41. Павел Кузьменко

    А как это дело провернуть, через Win Live Writer, там код другой, вставлял по разному, ничё не выходит. Вообще возможно это, или только если картинки в Пикаса попадают.

  42. Павел Кузьменко

    У меня и после удаления -h не работает. Единственное только то, что у меня в шаблоне уже всё сразу установлено для лайтбокса. Может скрипт другой. Но если вставлять картинку через блоггер, то, все работает. 

    P.S. Вопрос. Почему после публикации через WLW при открытии редактирования статьи в блоггер, текст тусует в общий блок. То есть пропадает форматир. абзацев. Вот именно поэтому и не хочу вставлять картинки через блоггер, приходиться всё по новой форматировать…

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

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