Галерея в виде обложек при помощи jQuery

В приложении iTunes можно заметить интересный эффект под названием CoverFlow. В данном уроке мы рассмотрим как сделать такую удобную навигацию с помощью jquery и css. Данная навигация станет отличным инструментом для навигации по большим коллекциям изображений или фонотеке музыки. Одним из преимуществ является трансформации css, которые придают эффект трехмерности изображений. Данный эффект обычно создают с помощью flash, но это не совсем практично и удобно в использовании, все это можно сделать достаточно проще..

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

..с помощью библиотек виджетов jquery ui. Фабрика виджетов является очень полезным инструментом, так как она предлагает последовательные, хорошо определенные структуры для создания и взаимодействия с плагинами с фиксацией состояния. Совсем не обязательно использовать фабрику виджетов, но она упрощает процесс установки стандартной конфигурации. При использовании фабрики виджетов надо помнить, что конечный результат не является виджетом jQuery UI – это все еще плагин jQuery, но с API похожей на jQuery UI.

Кодируем эффект CoverFlow с помощью фабрики виджетов jQuery UI $.widget.

$.widget('namespace.nameOfPlugin', {

// Опции по умолчанию

options: {

value: 10,

display: false

_create: function(){

// Вызывается при инициализации плагина

// this.options является комбинацией опций по умолчанию с переданными установками

// Пример использования this.options

if (this.options.display) {

// Проверка параметров дисплея

}

_someprivatemethod: function(value) {

// Частная внутренняя функция

// Примечание: частные функции должны именоваться с первым символом подчеркивания,

// так как их возможно вызвать только внутри плагина

// Функция возвращает переданное значение, увеличенное на 100.

return value + 100;

somepublicmethod: function() {

// Публичная функция, которая может быть вызвана вне плагина.

// Вызов частного метода в публичном.

this._privatemethod();

value: function(value) {

// Данная функция работает на выдачу значения,

// то есть она возвращает значение опции, а не объект jQuery

// Значение не передано, выдаем текущее значение

if (value === undefined) {

return this.options.value;

// Значение передано, устанавливаем новое значение для опции

} else {

this.options.value = this._someprivatemethod(value);

}

destory: function() {

$.widget.prototype.apply(this, arguments); // Деструктор по умолчанию

//Здесь можно выполнить операции отката для страницы

}

}));

Примечание: следующие методы по умолчанию доступны в каждой реализации плагина $.widget plugin:

destroy(): удаляет экземпляр из DOM
option(название_опции[, значение]): получает или устанавливает значения опций для данного экземпляра
enable(): разрешает использование функционала виджета, если она ранее было запрещена методом disable
disable(): запрещает использование функционала виджета

И следующее свойство доступно по умолчанию:

options: опции экземпляра виджета, смешение значений по умолчанию с установками обеспечивается пользователем

Используя выше описанную структуру можно инициализировать только что созданный плагин:

1	$('#myelement').nameOfPlugin();

Также можно вызвать публичные методы:

$('#myelement').nameOfPlugin('somepublicmethod');

// Инициализация плагина со значениями по умолчанию

$('#myelement').nameOfPlugin({ value: 70 };

// Получаем текущее значение опции

alert($('#myelement').nameOfPlugin('value');

// Устанавливаем текущее значение опции

$('#myelement').nameOfPlugin('value’, 45);

Создание плагина jQuery со статическим состоянием не занимает много времени, а $.widget обеспечивает удобный способ для написания виджетов.

Для генерирования эффекта CoverFlow используется несколько функций, но ключевыми являются select() и _refresh(). Функция select() выполняет анимацию перемещения при выборе обложки, а функция _refresh() генерирует информацию для трансформации обложки при различных действиях, таких как инициализация CoverFlow или нажатие на обложке для переноса ее на основной вид.

ui.coverflow.js.

select: function(item, noPropagation) {

this.previous = this.current;

this.current = !isNaN(parseInt(item,10)) ?

parseInt(item,10) : this.items.index(item);

// Если нажатие произошло на том же пункте, то анимацию не выполняем

if(this.previous == this.current) return false;

// Изменяем $.fx.step.coverflow каждый раз с использованием текущей области видимости переменных

// для заданной анимации

var self = this, to = Math.abs(self.previous-self.current) <=1 ?

self.previous : self.current+(self.previous < self.current ? -1 : 1);

$.fx.step.coverflow = function(fx) { self._refresh(fx.now, to, self.current); };

// Останавливаем предыдущую анимацию.

// Анимируем изменение свойств left/top родителя текущего пункта в центр.

// Используем пользовательскую анимацию обложки пункта

var animation = { coverflow: 1 };

animation[this.props[2]] = (

(this.options.recenter ? -this.current * this.itemSize/2 : 0)

// Центрируем контейнер пунктов

+ (this.options.center ? this.element.parent()[0]['offset'+this.props[1]]/2 - this.itemSize/2 : 0)

// Вычитаем отступ контейнера пунктов

- (this.options.center ? parseInt(this.element.css('padding'+this.props[3]),10) || 0 : 0)

);

// Запускаем событие 'select'

if(!noPropagation) this._trigger('select', null, this._uiHash());

// Выполняем процедуру анимации

this.element.stop().animate(animation, {

duration: this.options.duration,

easing: 'easeOutQuint'

});

}

Код, приведенный выше сначала определяет, справа или слева находится обложка (различные значения параметров используются в зависимости от стороны). Затем устанавливается z-Index для обложки в зависимости от глубины ее расположения в стеке изображений, а потом вычисляются значения матрицы трансформаций и масштабирования для картинок в форме трапеций.

this.items.each(function(i){

var side = (i == to && from-to < 0 ) ||

i-to > 0 ? 'left' : 'right',

mod = i == to ? (1-state) : ( i == from ? state : 1 ),

before = (i > from && i != to),

css = { zIndex: self.items.length +

(side == "left" ? to-i : i-to) };

css[($.browser.safari ? 'webkit' : 'Moz')+'Transform'] =

'matrix(1,'+(mod * (side == 'right' ? -0.2 : 0.2))+',0,1,0,0) scale('+(1+((1-mod)*0.3)) + ')';

css[self.props[2]] = ( (-i * (self.itemSize/2)) + (side == 'right'? -self.itemSize/2 : self.itemSize/2) * mod );

//Обработка процесса для браузеров, которые не поддерживают трансформации

//или не поддерживаются нашим плагином

if(!supportsTransforms) {

css.width = self.itemWidth * (1+((1-mod)*0.5));

css.height = css.width * (self.itemHeight / self.itemWidth);

css.top = -((css.height - self.itemHeight) / 2);

}

$(this).css(css);

});

Рассмотрим использование CoverFlow. Для использования CoverFlow нужно определить список пунктов, для которого будет использоваться эффект. Задействуем простую структуру HTML кода. Также определяем разметку для слайдера и списка названий, которые выводится ниже CoverFow.

<div>

<div id="imageCaption">Текст для примера</div>

</div>

Для контейнера CoverFlow, списка изображений (#coverflow) и самого изображения используются следующие стили CSS:

div.wrapper {

height: 390px;

width: 800px; /*600*/

padding: 10px;

overflow: hidden;

position: relative;

margin: 0 auto;

}

#coverflow {

height: 300px;

width: 2600px;

padding: 42px;

position: absolute;

top: 0px;

left: 0px;

margin-top: 50px;

}

#coverflow img {

width: 260px;

height: 260px;

float: left;

position: relative;

margin: -35px;

}

Демонстрация использует также дополнительные действия с помощью JavaScript. Они включены в отдельный файл app.js:

//Кэшируем ключевые компоненты

var html = $('#demo-frame div.wrapper').html();

var imageCaption = $('#imageCaption');

$('#demo-frame div.wrapper').parent().append(html).end().remove();

$sliderCtrl = $('#slider');

$coverflowCtrl = $('#coverflow');

$coverflowImages = $coverflowCtrl.find('img');

$sliderVertical = $("#slider-vertical");

//Значения по умолчанию

var defaultItem = 0;

var listContent = "";

//Устанавливаем индекс изображения по умолчанию

setDefault(7);

//Устанавливаем пункт, который будет выводиться при загрузке

//Корректируем индекс

function setDefault($n){

defaultItem = $n-1;

}

//Устанавливаем подись изображения

function setCaption($t){

imageCaption.html($t);

}

//Инициализируем CoverFlow

$coverflowCtrl.coverflow({

item: defaultItem,

duration:1200,

select: function(event, sky)

{

skipTo(sky.value);

}

});

//Инициализируем горизонтальный слайдер

$sliderCtrl.slider({

min: 0,

max: $('#coverflow > *').length-1,

value: defaultItem,

slide: function(event, ui) {

$coverflowCtrl.coverflow('select', ui.value, true);

$('.coverflowItem').removeClass('ui-selected');

$('.coverflowItem:eq(' + (ui.value) +')').addClass('ui-selected');

setCaption($('.coverflowItem:eq(' + (ui.value) +')').html());

}

});

//CoverFlow проводим до нужного пункта

function skipTo($itemNumber){

$sliderCtrl.slider( "option", "value", $itemNumber);

$coverflowCtrl.coverflow('select', $itemNumber, true);

$('.coverflowItem').removeClass('ui-selected');

$('.coverflowItem:eq(' + ($itemNumber) +')').addClass('ui-selected');

setCaption($('.coverflowItem:eq(' + ($itemNumber) +')').html());

}

//Генерируем текстовый список под изображениями обложек

$coverflowImages.each(function(index, value)

{

$artist = $(this).data('artist');

$album = $(this).data('album');

try{

listContent += "<li class='ui-state-default coverflowItem' data-itemlink='"

+ (index) +"'>" + $artist + " - " + $album +"</li>";

}catch(e){

}

});

//Устанавливаем все органы управления на текущий элемент

$('#sortable').html(listContent);

skipTo(defaultItem);

//Назначаем обработку события click для изображений обложек

$('body').delegate('.coverflowItem','click', function(){

skipTo($(this).data('itemlink'));

});

Теперь осуществляем навигацию с помощью клавиатуры:

//Обрабатываем события клавиатуры

$(document).keydown(function(e){

$current = $sliderCtrl.slider('value');

switch(e.keyCode){

case 37:

if($current > 0){

$current--;

skipTo($current);

}

break;

case 39:

if($current < $('#coverflow > *').length-1){

$current++;

skipTo($current);

}

break;

}

});

И последним шагом будет навигация с помощью колесика мыши:

$(document).mousewheel(function(event, delta){

var speed = 1;

var sliderVal = $sliderCtrl.slider("value");//Получаем текущее значение слайдера

var coverflowItem = 0;

var cflowlength = $('#coverflow > *').length-1;

//Проверяем delta для определения направления прокрутки колесика мыши

if(delta > 0 && sliderVal > 0){

sliderVal -=1;

}else{

if(delta < 0 && sliderVal < cflowlength){

sliderVal +=1;

}

var leftValue = -((100-sliderVal)*difference/100);// Вычисляем положение верхя содержания из положения слайдера

if (leftValue>0) leftValue = 0;// Останавливаем чрезмерную прокурутку вниз

if (Math.abs(leftValue)>difference) leftValue = (-1)*difference;// Останавливаем прокрутку содержания за нужную точку

coverflowItem = Math.floor(sliderVal);

skipTo(coverflowItem);

event.preventDefault();//Останавливаем обработку события по умолчанию

});

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Галерея в виде обложек при помощи jQuery

Читайте также:

Последние новости

Bootstrap 5: что нового и дата выхода

Как быстро и качественно прокачать свой сайт

Главные тренды веб-дизайна в 2020 году

Подборка новогоднего оформления для сайта

SERPStack — бесплатный API поиска Google

Гайд по Bootstrap Carousel: Примеры и уроки

Не пропусти