Highslide — простая и красивая галерея для сайта

Highslide - простая и красивая галерея для сайта

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

скачать исходникискачать урок

Установка библиотеки

Для скачивания и установки данной библиотеки, давайте перейдем на официальный сайт //highslide.com/ и кликнем по ссылке Download:

Перейдя по ссылке Tutorial, Вы попадаете на страницу документации данной библиотеки, где описаны все ее основные методы и свойства.

Особенно хотел бы обратить Ваше внимание на ссылку API reference – это справочник методов библиотеки. После скачивания Вы получите архив. В архиве Вы найдете примеры использования данной библиотеки, но нас интересует папка highslide, как раз в ней и расположена одноименная библиотека. При этом, библиотеку можно использовать в различных режимах и для каждого режима необходим определенный файл:

Режим отображения изображения – при этом на странице отображается миниатюра изображения, а при клике по ней открывается полное изображение. Для данного режима необходим файл highslide.js.

Режим галереи изображений – когда несколько изображений группируются в одну галерею. Для данного режима необходим файл highslide-with-gallery.js.

Режим отображения данных HTML — когда используя открывающиеся окна, отображается произвольное содержимое. Для этого необходим файл highslide-with-html.js.

Соответственно в данном уроке мы кратко рассмотрим каждый из этих режимов. Поэтому в качестве примера я буду использовать три тестовые страницы – по одной на каждый режим. А значит в каждую из них необходимо подключить один из файлов описанных выше. Помимо этого необходимо так же подключить файл стилей highslide.css и скопировать папку с графикой graphics. В дальнейшем мы будем указывать путь к ней, работая с библиотекой.

Отображение изображений

Напомню, что для данного режима мы подключаем файл highslide.js и соответственно файл стилей highslide.css. исходный код тестовой страницы:

Файл script.js, который так же подключается – это пустой файл, в котором мы будем вести кодирование на языке JavaScript. Обратите внимание – какой должна быть разметка для работы библиотеки. То есть, отображаем миниатюру (изображение небольшого размера) в качестве ссылки на полное изображение (изображение большого размера). В ссылке обязательно необходимо указать атрибут onclick=»return hs.expand(this)». Конечно использование атрибута onclick – это существенный минус, но что поделаешь. К каждому изображению, можно добавить нижнюю подпись, в виде блока div, с классом «highslide-caption», а так же заголовок (текстовую шапку), в виде блока блока div, с классом «highslide-heading».

Далее в файле script.js, укажем путь к папке с графикой:

Теперь посмотрим, что получилось в браузере:

То есть, как Вы видите, все успешно работает. Теперь в файле scrit.js, добавим еще две строки:

Первая – задает класс для блока показа полного изображения, вторая задает класс внешнего контейнера блока показа полного изображения. Таким образом, мы добавляем белую широкую рамку и скругляем углы в блоке показа полного изображения:

Следующие строки добавляют кнопку закрыть в верхний правый угол блока просмотра полного изображения:

Так же хотел бы отметить, что в фале стилей highslide.css, возле классов, которые можно использовать в методах библиотеки, описаны комментарии и примеры использования их.

Отображение галереи изображений.

HTML разметка галереи изображений, полностью аналогична разметке описанной выше, за исключением того, что все изображения оборачиваются тегом div, с классом «highslide-gallery»:

В файле script.js, необходимо удалить или закомментировать предыдущий код и заменить новым:

Сейчас мы уже обращаемся к методу addSlideshow(), который добавляет слайдшоу к группе изображений. Параметры метода:

interval – интервал в миллисекундах, между показами изображений;

repeat – если true – циклический показ всех изображений галереи;

useControls – если true — будут показаны элементы управления галереей;

overlayOptions – параметры слоя с элементами управления: opacity – прозрачность, position – позиция, hideOnMouseOut – если true, элементы управления будут показаны при наведении мыши.

При этом на экране мы увидим следующее:

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

Пояснения кода:

hs.wrapperClassName = «controls-in-heading» – данный класс уменьшает блок элементов управления, что бы он помещался в шапке изображения;

hs.align = ‘center’ – располагает блок полного изображения по центру;

hs.transitions = [‘expand’,’crossfade’] – выбор анимации;

thumbstrip: — свойство, которое определяет настройки слоя с миниатюрами блока просмотра полного изображения: position – позиция миниатюр, mode – режим отображения, в нашем случае горизонтальный (есть еще vertical).

Отображение текста

И последний пример, который мы сегодня рассмотрим – это отображение обычного текста в виде открывающего окошка. Итак, нам потребуется HTML разметка следующего вида:

А в файле script.js, оставляем только строку:

После этого открываем браузер и проверяем:

Вот таким образом, можно отображать произвольные данные.

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

Всего Вам доброго и удачного кодирования!!!

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (3)