Полноэкранный просмотр изображений

Внизу страницы подключаем скрипт intense.js или intense.min.js и назначаем для миниатюры или блока:

var elements = document.querySelectorAll( '.img-class' );
Intense( elements );

1 2	var elements = document.querySelectorAll( '.img-class' ); Intense( elements );

А для оформления (при желании) используем курсор для наведения plus_cursor.png и стиль:

.img-class {
  cursor: url("plus_cursor.png") 25 25, pointer;
}

.img-class {

cursor: url("plus_cursor.png") 25 25, pointer;

}

Либо используем свои стили, но так как у нас нет ссылки на оригинальное фото, нужно как минимум будет прописать: cursor: pointer

<img class="img-class" src="mini-myimg.jpg" data-image="open-myimg.jpg" data-title="title-myimg" data-caption="caption-myimg" />

1	<img class="img-class" src="mini-myimg.jpg" data-image="open-myimg.jpg" data-title="title-myimg" data-caption="caption-myimg" />

или

<div class="img-class" data-image="open-myimg.jpg" data-title="title-myimg" data-caption="caption-myimg">
	<img src="mini-myimg.jpg" />
</div>

</div>

Где:

Горизонтальное фото

Вертикальное фото

Маленькое фото

(не рекомендуется)

Дополнительную информацию можно найти на страничке автора