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

Доброго часу доби, шановні читачі. Впевнена, ця стаття стане в нагоді кожному, особливо тим блогерам, основним контентом яких є фотографії. Сьогодні я розповім вам, як на блозі Blogger / Blogspot зробити красиву галерею фотографій LightBox. Хто ще не знає, що це за галерея, натискаємо по фотографії. Всі зображення в цій статті клікабельні. Якщо ви читаєте зі своїх рідерів або пошти, то перейдіть на статтю в блозі.

Через переїзд блогу з Blogger на WordPress подивитися ефект LighBox ви можете по старою адресою .

Галерею 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;

Отже, тепер у своєму блозі ми маємо гарну галерею, і вміємо по різному оформляти свої пости в блоге.Удачі в розвитку.

PS Як виявилося, мій скрипт в блозі працює трохи інакше, відразу показуючи всі фотографії, які знаходяться в одному пості, незалежно від того, до якого альбому вони належать.

Правда, дуже просто?
Jpg?

Fast : Интернет-провайдеры и сети

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