Создаём галерею с увеличением изображений. Настройка Highslide

Если у Вас есть мини-эскиз изображения и его качественный оригинал и Вам требуется в разрезе новости создать на сайте красивое, всплывающее по щелчку, оригинальное изображение (при этом мини эскиз и оригинал могут быть даже разными фотографиями), Вы можете воспользоваться javascript framework ом highslide. Как это будет выглядеть? Приведу пример (просто щёлкните по мини-эскизу).

Галереи изображений с возможностью увеличения

Понравилось? Хотите создать на Вашем сайте подобную галерею с возможнсотью увеличения изображения? Инструкция по созданию:

Выбираем последнюю версию, нажимаем скачать (download), одобряем лицензионное соглашение (если Ваш сайт не коммерческий).
Создаём на Вашем сайте директорию js, копируем в неё файлы из папки highslide

В секцию head вашей страницы включаем:

HTML:

    <link href="/js/highslide.css" rel="stylesheet" type="text/css" />

JS:

    <script language="javascript" type="text/javascript" src="/js/highslide-full.js"></script>
    <script language="javascript" type="text/javascript" src="/js/language/ru.js"></script>

Загружаем на сайт в папку /images/ необходимые изображенияСовет: для мини эскизов создайте подпапку /images/mini,заливайте изображения в одинаковом формате, и давайте мини-эскизу и оригинальному изображению одинаковые имена, это упростит задачу размещения изображений в материалах.Теперь в размещаемом материале вставляем ссылку a с атрибутом href и регистрацией события onclick, которое сработает при щелчке по ссылке. Присваиваем ссылке класс highslide. А внутри ссылки размещаем тег img указывающий на мини эскиз.

Пример внедрения галереи со всплывающими изображениями:

<a href="/images/original.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="/images/mini/original.jpg" width="400" alt="Some Image"/>
</a>

Другой вариант размещения галереи со всплывающими изображениями:

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

<a href="/images/original.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="/images/original.jpg" width="300" alt="Some Image"/>
</a>

Примечание: не забываем указывать (если мини-эскиз заранее не был подготовлен определённой длинны и ширины) атрибут width (или же height) для тега img.

Примечание: формат записи: onclick=»return hs.expand(this)» обязателен. Дело в том, что, возвращая значение (false в случае удачной инициализации объекта highslide) мы отменяем событие по умолчанию (переход по ссылке).

Напоминание: width и height (целые числа), указанные в теге img имеют высший приоритет перед теми же параметрами, заданными в css через класс или id.

Добавляем заголовок во всплывающем окне для галереи с мини-эскизами.

Для этого требуется функции hs.expand передать дополнительные опции. Как же добавить заголовок. Для этого нам стоит для тега <a> задать атрибут title и передать его функции hs.expand:

<a href="/images/original.jpg" class="highslide" title="Это заголовок для всплывающего окна" onclick="return hs.expand(this,{captionText: this.title})">
	<img src="/images/mini/original.jpg" width="400" alt="Some Image"/>
</a>

Совет: для красивого вида сайта всегда подготавливайте мини-эскизы и всплывающие фотографии одинаковых размеров. (Или заключайте мини-эскизы в контейнер с одинаковыми размерами).

Напоминание: не забываем задавать alt атрибут для изображений Img. Подсказываем поисковыми системам тематику изображения (Привлекаем посетителей с поиска по картинкам.

Группируем изображения в галереи с возможностью слайдшоу и элементами навигации в highslide.

В секцию head добавляем следующие строчки:

      <script type="text/javascript">
      //<!--
       var galleryOptions = {
		slideshowGroup: "mysite",
		dimmingOpacity: "0.8",
               captionEval: "this.a.title"
	};
	hs.addSlideshow({
	    slideshowGroup: "mysite",
	    dimmingOpacity: "0.8",
	    interval: 3000,
	    repeat: false,
	    useControls: true,
	    fixedControls: true,
	    overlayOptions: {
		position: "top center"
	    }
	});
 	//-->
	</script>

А ссылки для галереи с мини-эскизами и фотографиями для увеличения приводим к такому виду.

<a href="/images/original.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)" title="Это заголовок для всплывающего окна 1" >
	<img src="/images/mini/original.jpg" width="400" alt="Some Image"/>
</a>
<a href="/images/original.jpg1" class="highslide" onclick="return hs.expand(this, galleryOptions)" title="Это заголовок для всплывающего окна 2" >
	<img src="/images/mini/original.jpg1" width="400" alt="Some Image"/>
</a>

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

Разберём настройки галереи изображений с возможностью увеличения:

var galleryOptions = {} — настраиваем опции группы изображений группы «mysite».
slideshowGroup: «mysite» — определяем группу изображений mysite.
dimmingOpacity: «0.8» – задаём прозрачность для фона в lightbox эффекте.
captionEval: «this.a.title» – ещё один способ озаглавить всплывающее окно с помощью атрибута title тега <a>.
hs.addSlideshow({ }) — добавляем слайдшоу для группы «mysite».
slideshowGroup: «mysite» — присваиваем группу изображений.
dimmingOpacity: «0.8»— задаём прозрачность для фона в lightbox эффекте.
interval: 3000 — указываем интервал для слайд шоу.
repeat: false — бесконечное слайд шоу (true) или слайд шоу только один раз – (false).
useControls: true — задействовать панель навигации (кнопки: на одно изображение вперёд, на одно назад, оригинальный размер, включить слайд шоу).

   overlayOptions: {
		position: "top center"
   }

Указываем, где расположить заголовок окна highslide и элементы навигации (в данном случае сверху по центру). На этом я закончку краткий экскурс в использование highslide js для организации галерей изображений с вомозжностью увеличения и слайд шоу при создании сайта.

А в следующих статьях мы рассмотрим:

Хитрости по настройке highslide js.
Предопределённые стили галереи.
Встраиваемая галерея изображений средствами highslide js.
И ещё приведу пример скрипта автоматического добавления highslide js ко всем картинкам с заданным классом.

Поделитесь со своими друзьями