Полноэкранное отображение изображений

demosourse

JavaScript для просмотра изображений на полный экран. Прокрутка осуществляется при помощи движения мыши.

Настройка

Данная библиотека не зависит ни от одного из фрэймворков (включая jQuery). Стилизация изображений полностью ложится на плечи разработчика, Intense.js берёт на себя отображение на странице.

HTML

Есть несколько альтернативных способов вставки изображения. Можете воспользоваться атрибутом data-image, если хотите загружать изображения разного размера.

<img src="./img/awesome-source.jpg" />

<!-- OR -->

<div class="anything" data-image="./img/awesome-source.jpg" />

Так же можем вставить заголовок и описание изображения в нижнем правом углу. Для этого воспользуйтесь атрибутами data-title и data-caption.

<img src="./img/awesome-source.jpg" data-title="My beach adventure" data-caption="Thanks Sam, for the great picture"/>

JS

Для использования Intense.js сначала сделаем выборку изображений с помощью document.querySelector и вызовем плагин.

<img src="./img/awesome-source.jpg" />

<script>
window.onload = function() {
    // Intensify all images on the page.
    var element = document.querySelector( 'img' );
    Intense( element );
}
</script>

Или выбрать несколько изображений по имени класса.

<img src="./img/awesome-source.jpg" class="intense" />
<img src="./img/awesome-source.jpg" class="intense" />

<script>
window.onload = function() {
    // Intensify all images with the 'intense' classname.
    var elements = document.querySelectorAll( '.intense' );
    Intense( elements );
}
</script>

CSS

Так же можем изменить иконку курсора:

.your-image-class {
    cursor: url('./you-image-directory/plus_cursor.png') 25 25, auto;
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/tholman/intense-images
Перевел: Станислав Протасевич
Урок создан: 1 Октября 2014
Просмотров: 14909
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^