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

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

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

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

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

Для скачивания и установки данной библиотеки, давайте перейдем на официальный сайт http://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. исходный код тестовой страницы:

<!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, укажем путь к папке с графикой:

hs.graphicsDir = 'css/graphics/';

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

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

hs.wrapperClassName = 'wide-border';
hs.outlineType = 'rounded-white';

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

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

hs.registerOverlay({
	html:'<div class="closebutton" onclick="return hs.close(this)" title="Закрыть"></div>',
	position:'top right'
});

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

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

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

<!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, необходимо удалить или закомментировать предыдущий код и заменить новым:

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, элементы управления будут показаны при наведении мыши.

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

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

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 разметка следующего вида:

<!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, оставляем только строку:

hs.graphicsDir = 'css/graphics/';

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

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

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

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

Хотите научиться делать фотогалереи как Вконтакте?

Прямо сейчас изучите курс по созданию красивой фотогалареи как Вконтакте!

Смотреть курс

Метки: ,

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

Комментарии Facebook:

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

  1. Евгений Л.

    Урок замечательный! Было бы неплохо, если бы вы добавили на этом сайте раздел, посвященный исключительно обзору плагинов jQuery.

  2. Ну Ри

    Как можно прикрутить этот скрипт к проекту Yii2, если картинка берется из БД?
    С уважением,
    Ну Ри Канг

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree