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

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


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

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

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

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

<!--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-->


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

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

Пример работы картинок для ссылки выше:
<a  href="/images/nwb/forum.png" class="highslide" onclick="return hs.expand(this)"><img src="/images/nwb/forum.png" class="hsdot" /></a> 


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

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

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

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


Понравилась статья "Плавное увеличение размера изображения при клике" из раздела Веб разработка » JavaScript? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 5425   Дата: 04-ноя-2014, 11:06

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика