Управляем галереей движениями мышки.

Сегодня я расскажу о галерее, управлять которой можно при помощи мышки, но не привычными щелчками по кнопке "next" или "previous", а движениями влево, вправо и в другие стороны.

К сожалению, данная галерея не работает в браузере IE 6.0.

demosourse

Шаг 1.

Подключим необходимые для работы скрипты, прописав следующий код между тегами <head>:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="gestures.js"></script>

Шаг 2.

Между тегами <head> или в отдельном файле CSS-стилей пропишите следующие стили:

#pic { width:500px; height:334px; margin:0 auto; }
.meta { background:#505050; color:#bbb; padding:5px; font-size:1.4em;
        display:none;}

Шаг 3.

Вся галерея состоит из двух пустых блоков. Вставим их в наш документ. Вот код:

 <div class="meta" id="title"></div>

<div id="pic"></div>

Шаг 4.

Затем вставим следующий скрипт:

<script type='text/javascript'>

var pics = [{

'pic':'1.jpg',

'title':'Gipsy king',

'url':'1.jpg'

}, {

'pic':'2.jpg',

'title':'Carnivale, part II',

'url':'2.jpg'

}, {

'pic':'3.jpg',

'title':'Three cubes',

'url':'3.jpg'

}];

function the_pic() {

return $('#pic').data('pic');

}

function show_pic(nb) {

if ($('#pic:visible').length) {

$('#pic').fadeOut('normal').queue(function () {

$(this).css('background', 'url('+pics[nb].pic+')')

$(this).dequeue().fadeIn('normal');

}).data('pic', nb);

} else {

$('#pic').css('background', 'url('+pics[nb].pic+')').data('pic', nb);

}

$('#title').html(pics[nb].title);

}

function log(txt) {

$('#logger').html(txt);

}

$(function() {

$.gestures.init({active:false,color:'#ff0000'});

$.gestures.register('R', function () {

var nb = (the_pic()+1)%pics.length;

log('<code>Right</code> : Next picture');

show_pic(nb);

});

$.gestures.register('L', function () {

var nb = the_pic();

if (nb == 0) { nb = pics.length - 1} else {nb--}

log('<code>Left</code> : Previous picture');

show_pic(nb);

});

$.gestures.register('UR', function() { 

log('<code>Up, Right</code> : Show title');

$('#title').html(pics[the_pic()].title);

$('#title').fadeIn();

});

$.gestures.register('DR', function() { 

log('<code>Down, Right</code> : Hide title');

$('#title').fadeOut();

});

$.gestures.register('DL', function() { 

log('<code>Down, Left</code> : Open flickr page');

window.open(pics[the_pic()].url);

});

$.gestures.error(function(g) {

log('Unknown Gesture : <code>'+g+'</code>');

});

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

if ($.gestures.active() && e.which==27) {

log('Disabling gestures');

$.gestures.disable();

} else if (!$.gestures.active() && (e.which==17 || e.which==18)) {

$.gestures.enable();

}

});

$(window).keyup(function(e) {

if ($.gestures.active() && (e.which==17 || e.which==18)) {

$.gestures.disable();

}

});

show_pic(0);

})

</script>

В начале этого скрипта измените пути к картинкам непосредственно в галерее (параметр pic), к полноразмерным картинкам (параметр url), а также названия изображений (параметр title)

Готово! Встретимся в следующем уроке!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.friggeri.net
Перевел: Сергей Патин
Урок создан: 22 Мая 2009
Просмотров: 30788
Правила перепечатки

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

^ Наверх ^