От автора: В данном уроке я хотел бы представить Вашему вниманию библиотеку 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. исходный код тестовой страницы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/highslide.css"/> <script type="text/javascript" src="js/highslide.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="wrap"> <div class="karkas"> <a href="img/1.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="img/th/1_th.jpg" title="Подсказка 1" /> </a> <div class="highslide-caption"> Заголовок 1 </div> <div class="highslide-heading"> Хедер 1 </div> <a href="img/2.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="img/th/2_th.jpg" title="Подсказка 2"/> </a> <div class="highslide-caption"> Заголовок 2 </div> <div class="highslide-heading"> Хедер 2 </div> <a href="img/3.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="img/th/3_th.jpg" title="Подсказка 3"/> </a> <div class="highslide-caption"> Заголовок 3 </div> <div class="highslide-heading"> Хедер 3 </div> <a href="img/4.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="img/th/4_th.jpg" title="Подсказка 4"/> </a> <div class="highslide-caption"> Заголовок 4 </div> <div class="highslide-heading"> Хедер 4 </div> </div> </div> </body> </html> |
Файл script.js, который так же подключается – это пустой файл, в котором мы будем вести кодирование на языке JavaScript. Обратите внимание – какой должна быть разметка для работы библиотеки. То есть, отображаем миниатюру (изображение небольшого размера) в качестве ссылки на полное изображение (изображение большого размера). В ссылке обязательно необходимо указать атрибут onclick=»return hs.expand(this)». Конечно использование атрибута onclick – это существенный минус, но что поделаешь. К каждому изображению, можно добавить нижнюю подпись, в виде блока div, с классом «highslide-caption», а так же заголовок (текстовую шапку), в виде блока блока div, с классом «highslide-heading».
Далее в файле script.js, укажем путь к папке с графикой:
|
1 |
hs.graphicsDir = 'css/graphics/'; |
Теперь посмотрим, что получилось в браузере:
То есть, как Вы видите, все успешно работает. Теперь в файле scrit.js, добавим еще две строки:
|
1 2 |
hs.wrapperClassName = 'wide-border'; hs.outlineType = 'rounded-white'; |
Первая – задает класс для блока показа полного изображения, вторая задает класс внешнего контейнера блока показа полного изображения. Таким образом, мы добавляем белую широкую рамку и скругляем углы в блоке показа полного изображения:
Следующие строки добавляют кнопку закрыть в верхний правый угол блока просмотра полного изображения:
|
1 2 3 4 |
hs.registerOverlay({ html:'<div class="closebutton" onclick="return hs.close(this)" title="Закрыть"></div>', position:'top right' }); |
Так же хотел бы отметить, что в фале стилей highslide.css, возле классов, которые можно использовать в методах библиотеки, описаны комментарии и примеры использования их.
Отображение галереи изображений.
HTML разметка галереи изображений, полностью аналогична разметке описанной выше, за исключением того, что все изображения оборачиваются тегом div, с классом «highslide-gallery»:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/highslide.css"/> <script type="text/javascript" src="js/highslide-with-gallery.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="wrap"> <div class="karkas"> <div class="highslide-gallery"> <a href="img/1.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="img/th/1_th.jpg" title="Подсказка 1" /> </a> <div class="highslide-caption"> Заголовок 1 </div> <div class="highslide-heading"> Хедер 1 </div> <a href="img/2.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="img/th/2_th.jpg" title="Подсказка 2"/> </a> <div class="highslide-caption"> Заголовок 2 </div> <div class="highslide-heading"> Хедер 2 </div> <a href="img/3.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="img/th/3_th.jpg" title="Подсказка 3"/> </a> <div class="highslide-caption"> Заголовок 3 </div> <div class="highslide-heading"> Хедер 3 </div> <a href="img/4.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="img/th/4_th.jpg" title="Подсказка 4"/> </a> <div class="highslide-caption"> Заголовок 4 </div> <div class="highslide-heading"> Хедер 4 </div> </div> </div> </div> </body> </html> |
В файле script.js, необходимо удалить или закомментировать предыдущий код и заменить новым:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
hs.graphicsDir = 'css/graphics/'; hs.addSlideshow({ interval:1000, repeat:true, useControls:true, overlayOptions:{ opacity:0.75, position:'bottom center', hideOnMouseOut:true, } }); |
Сейчас мы уже обращаемся к методу addSlideshow(), который добавляет слайдшоу к группе изображений. Параметры метода:
interval – интервал в миллисекундах, между показами изображений;
repeat – если true – циклический показ всех изображений галереи;
useControls – если true — будут показаны элементы управления галереей;
overlayOptions – параметры слоя с элементами управления: opacity – прозрачность, position – позиция, hideOnMouseOut – если true, элементы управления будут показаны при наведении мыши.
При этом на экране мы увидим следующее:
Данную галерею можно улучшить, а именно добавить миниатюры в блок просмотра полного изображения, а также расположить данный блок по центру и изменить анимационный эффект смены изображений:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
hs.graphicsDir = 'css/graphics/'; hs.wrapperClassName = "controls-in-heading"; hs.outlineType = 'rounded-white'; hs.align = 'center'; hs.transitions = ['expand','crossfade']; hs.addSlideshow({ interval:1000, repeat:true, useControls:true, overlayOptions:{ opacity:0.75, position:'top right', hideOnMouseOut:false, }, thumbstrip: { position:'bottom center', mode:"horizontal" } }); |
Пояснения кода:
hs.wrapperClassName = «controls-in-heading» – данный класс уменьшает блок элементов управления, что бы он помещался в шапке изображения;
hs.align = ‘center’ – располагает блок полного изображения по центру;
hs.transitions = [‘expand’,’crossfade’] – выбор анимации;
thumbstrip: — свойство, которое определяет настройки слоя с миниатюрами блока просмотра полного изображения: position – позиция миниатюр, mode – режим отображения, в нашем случае горизонтальный (есть еще vertical).
Отображение текста
И последний пример, который мы сегодня рассмотрим – это отображение обычного текста в виде открывающего окошка. Итак, нам потребуется HTML разметка следующего вида:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/highslide.css"/> <script type="text/javascript" src="js/highslide-with-html.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="wrap"> <div class="karkas"> <a href="#" onclick="return hs.htmlExpand(this)">Открыть окошко</a> <div class="highslide-maincontent"> <h1>Заголовок</h1> <p>Произвольный текст </p> </div> </div> </div> </body> </html> |
А в файле script.js, оставляем только строку:
|
1 |
hs.graphicsDir = 'css/graphics/'; |
После этого открываем браузер и проверяем:
Вот таким образом, можно отображать произвольные данные.
Как Вы видите функционал библиотеки, достаточно большой и мы в данном уроке рассмотрели только малую его часть. Поэтому если Вас заинтересовала данная библиотека, продолжайте знакомство с ней самостоятельно.
Всего Вам доброго и удачного кодирования!!!
Комментарии (3)