Подключение:
Внизу страницы подключаем скрипт 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 = описание на увеличенном изображении (не обязательно)
Результат:
Горизонтальное фото
Вертикальное фото
Маленькое фото
(не рекомендуется)
(не рекомендуется)
Дополнительную информацию можно найти на страничке автора
По моему, при наличии множества профессиональных галерей, такие любительские скрипты уже не уместны.
Каждому своё. На вкус и цвет товарища нет.
заткнись
помой его