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

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

Все очень просто и понятно. Технология увеличения изображений при клике называется highslide и работает на javascript. За основу мы возьмем древнейший скрипт, с которым я работаю еще с 2008 года https://highslide.com/

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

Скрипт находится тут: https://highslide.com/download.php и подключается на страницу следующей конструкцией:

Пример работы можно увидеть на моем статическом сайте написанном на файлах: https://works.artemmian.ru/net-work-bux.php

В скрипте, если вы скачаете и посмотрите примеры разработчики предлагают вариант с двумя картинками - одна уменьшенная, на превью, а вторая - для увеличения. Но это глупость, достаточно будет и одной большой картинки, а на CSS написать для нее сжатие до размеров превью. Смотреть пример на моем сайте!

Пример работы картинок для ссылки выше:

.hsdot{
		width:100px; 
		height:100px;
	}

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

А теперь по пунктам!

1. Скачиваем скрипт плавного увеличения картинок при клике highslide js по ссылке в начале поста
2. Вставляем код между тегами head
3. Вставляем картинки на сайт по примерам из описания к скрипту.