назад к списку статей

Увеличение картинки при клике

Увеличение изображения при нажатииСегодня разберем, как легко и просто реализовать на сайте увеличение изображения при нажатии кнопки мыши. Обойдемся без велосипедов и внедрим проверенную годами библиотеку Highslide.js.

Highslide JS - это библиотека на чистом javascript, которая при своих относительно небольших размерах имеет достаточно обширный функционал и простую настройку. Она имеет MIT-лицензию, это означает, что ее можно использовать бесплатно как в некоммерческих, так и в коммерческих целях.

Highslide JS - установка и настройка

Скачиваем с официального сайта архив с библиотекой и распаковываем его. Каталог имеет следующую структуру:

Структура сборки highslide js

В папке examples есть множество примеров использования библиотеки. Мы же остановимся на самом простом - увеличение картинки при клике. Для этого берем из каталога highslide:

  • highslide.js - JS-скрипт библиотеки;
  • highslide.css - стили библиотеки. Необходимы для правильного отображения увеличенного изображения;
  • graphics - каталог с графическими компонентами библиотеки. Необходимы для отображения вспомогательных элементов: лупа, кнопка закрытия и пр.

Создайте в структуре вашего сайта каталог highslide и скопируйте все вышеперечисленное в него. Важно, чтобы все находилось в одной папке, иначе нужно будет переопределять пути. Теперь на страницах, где вы хотите использовать увеличение фотографий, внутри директивы <head> необходимо разместить следующий код:

<script src="/highslide/highslide.js" type="text/javascript"></script>
<link href="/highslide/highslide.css" rel="stylesheet" property="stylesheet" />
<script type="text/javascript">
 hs.graphicsDir = '/highslide/graphics/';
 hs.wrapperClassName = 'your-own-style';
</script>

Мы подключили JS-библиотеку и стили компонента, а так же прописали hs.graphicsDir - путь до графических компонентов. Свойство hs.wrapperClassName необязательно, оно переопределяет стандартный стиль отображения компонента. Вы можете создать свой стиль, адаптировав его под стилистику вашего сайта. Спецификация тут.

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

<a href="/images/image.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="/images/image_small.jpg" />
</a>

где images/image_small.jpg - изображение, по которому мы кликаем, а images/image.jpg - крупная версия изображения, которое откроется по щелчку. Все очень просто! Теперь при нажатии на картинку, откроется ее увеличенная версия.

Вам также может быть интересно:

Отправка email на C#

Пример использования 7-zip в .Net

Маска файла с помощью регулярных выражений

Построение x64 проекта установки в 32-разрядной среде

назад к списку статей


.