Highslide — плавное увеличение размера изображения при клике

highslide js - Highslide — плавное увеличение размера изображения при клике

Технология увеличения изображений при клике называется highslide и работает на javascript. Изображения плавно увеличиваются в модальном окне и позволяют более гибко настраивать сайт.

За основу мы возьмем древнейший скрипт, с которым я работаю еще с 2008 года на http://highslide.com/

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

Интересующий нас скрипт: http://highslide.com/download.php

Подключение highslide на сайт

<!--highslide-->
<link rel="stylesheet" type="text/css" href="/css/highslide.css" />
<script type="text/javascript" src="/js/highslide.js"></script>
<script type="text/javascript">
  hs.graphicsDir = '../highslide/graphics/';
  hs.outlineType = null;
  hs.wrapperClassName = 'colored-border';
</script>
<!--highslide end-->

Скрипт разработан под две картинки. Первая — уменьшенная копия размещается на странице, а вторая — оригинальная появляется при клике на уменьшенную, но никто не мешает использовать одну большую картинку и сжимать ее средствами CSS. Пример работы через две картинки:

<a  href="/images/nwb/forum.png" class="highslide" onclick="return hs.expand(this)"><img src="/images/nwb/forum.png" /></a>

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

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

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