Використовуємо галереї Highslide на своєму сайті

55

Були часи,коли я безуспішно шукав рішення для ефектного виведення зображень або спливаючих, інформаційних блоків на сторінки свого сайту. Як завжди, буржуїни-брати намагалися першими. На арені, якщо можна так висловитися, з’явився відмінний інструментарій, скрипт Highslide і дуже швидко завоював популярність в середовищі веб-розробників і дизайнерів різного калібру. Приваблює в цьому скрипті різноплановість застосування. Звичайно в більшій мірі його використовують як раз для плавного переходу до перегляду повно-розмірних зображень, побудови ефектних галерей з фотографій.

Довго і нудно розписувати всі принади скрипта не буду, так як краще всього подивитися приклади використання Highslide в живу:

  • З білим обрамленням і закругленими кутами
  • Темний стиль з фоновим світлом
  • З білою рамкою 10 пікселів і тінню
  • З тінню, але без рамки, плюс напівпрозора кнопка закриття
  • Без графічного оздоблення
  • Карта зображення з заголовком з тега title

Тепер давайте розглянемо вихідний код скрипта і навчимося застосовувати його у себе на сайті.

Для того щоб все це пишність запрацювало, вам необхідно розмістити файли скрипта у себе на сервері і вже безпосередньо у html документах, прописати виконуваний javascript, головне не забувайте надалі правильно оформляти посилання на зображення.

І так, наприклад, для отримання ефекту збільшення зображення в блоці з білою рамкою в 10px і тінню, вам необхідно між тегами … вставити наступне:


Не забувайте прописувати правильний шлях до файлу таблиці стилів, тобто вказуйте теку highslide і сам файл .css

Далі-простіше, між тегами … прописуємо наступний код:

1
2
3
4
hs.graphicsDir = '*папка скриптів*/highslide/graphics/';
hs.wrapperClassName = 'wide-border';

hs.graphicsDir = ‘*папка скриптів*/highslide/graphics/’;
hs.wrapperClassName = ‘wide-border’;

Значення параметра hs.graphicsDir, також дуже важливо прописати коректно.
Ну, і нарешті, для досягнення результату, нам залишається оформити висновок зображення безпосередньо на сторінці HTML.
Це буде виглядати наступним чином:
В тілі сторінки, де вам необхідно, між тегами … вставляєте наступну конструкцію:

Highslide JS

Highslide JS

Атрибут href посилання визначає адресу повнорозмірного зображення.
І останнім штрихом буде висновок написи на зображенні, для цього безпосередньо після коду на зображення, слід прописати:

Тут слід сама підпис зображення.

Тут слід сама підпис зображення.

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

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: