Подключение:
Внизу страницы подключаем скрипт intense.js или intense.min.js и назначаем для миниатюры или блока:
1 2 |
var elements = document.querySelectorAll( '.img-class' ); Intense( elements ); |
А для оформления (при желании) используем курсор для наведения plus_cursor.png и стиль:
1 2 3 |
.img-class { cursor: url("plus_cursor.png") 25 25, pointer; } |
Либо используем свои стили, но так как у нас нет ссылки на оригинальное фото, нужно как минимум будет прописать: cursor: pointer
HTML:
1 |
<img class="img-class" src="mini-myimg.jpg" data-image="open-myimg.jpg" data-title="title-myimg" data-caption="caption-myimg" /> |
или
1 2 3 |
<div class="img-class" data-image="open-myimg.jpg" data-title="title-myimg" data-caption="caption-myimg"> <img src="mini-myimg.jpg" /> </div> |
Где:
- class = класс, через который открывается изображение.
- data-image = большое изображение, которое открывается.
- data-title = заголовок на увеличенном изображении (не обязательно)
- data-caption = описание на увеличенном изображении (не обязательно)
Результат:



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