Да, да, господа, очередная статья про аналоги LightBox. Мы уже миновали LightBox 2.04, FancyBox 1.2.1 и LightWindow 2.0, теперь нас ожидает на очереди HighSlide.

Данный скрипт не использует ни фреймворки, ни библиотеки, исключительно индивидуальная работа. С первого просмотра HighSlide привлёк моё внимание: очень уж шикарно оформлен. Как и LightWindow, имеет множество вариантов реализации. В данной статье хотелось разобрать один вариант, все остальные Вы можете просмотреть в архиве.

Итак, приступаем к установке:

Шаг №1

Подключаем необходый для работы скрипт, который находится в папке js:

<script type="text/javascript" src="js/highslide-with-gallery.js"></script>

Шаг №2

Подключаем таблицу стилей:

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

Если Вы используете свою таблицу стилей, то скопируйте содержимое style.css.

Шаг №3

Прописываем следующий скрипт, который вызывает работу HighSlide:

<script type="text/javascript">
      hs.graphicsDir = 'images/highslide/';
      hs.align = 'center';
      hs.transitions = ['expand', 'crossfade'];
      hs.outlineType = 'rounded-white';
      hs.fadeInOut = true;
      //hs.dimmingOpacity = 0.75;
      // Add the controlbar
      hs.addSlideshow({
      //slideshowGroup: 'group1',
      interval: 5000,
      repeat: false,
      useControls: true,
      fixedControls: 'fit',
      overlayOptions: {
      opacity: .75,
      position: 'bottom center',
      hideOnMouseOut: true
      }
      });
  </script>

Шаг №4

Копируем графику из папки images/highslide/ к себе на сайт и прописываем ссылки на изображения:

<p><a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/thumbnail.jpg" alt="Описание" title="Нажмите для увеличения"/>
</a>
<a href="images/full-image2.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/thumbnail2.jpg" alt="Описание" title="Нажмите для увеличения"/>
</a></p>

Все, установка завершена.

Итог:

Теперь в нашей коллекции четыре скрипта, каждый из которых хорош по-своему. Лично отдаю предпочтение LightWindow и HighSlide. Первый хорош своей структурой в организации галереи, превосходная анимация, второй - отличается своей индивидуальностью и возможностью передвигать изображение.

Не стоит забывать про FancyBox. Думаю, что тот, кто не нуждается в функционале и изящности, остановится именно на этом варианте. Пожалуй, это самое лучшее, что я видел на jQuery. Ну, а классика в данной индустрии, LightBox, ещё долгое время будет пользоваться популярностью.