Галерея с помощью технологии drag-and-drop

Продолжаем рассматривать интересные галереи для сайта. В сегодняшнем уроке мы рассмотрим весьма интересную вещь, а именно технологию drag-and-drop («перетащи-и-брось»), добавив к ней плагин fancybox, который позволит открывать изображение в оригинальный размер, в модальном окне. Смотрится достаточно красиво, весьма заинтересовывая пользователей своей оригинальностью и свободой действий, а именно, перетаскивание изображений по холсту. Вот что у нас с этого вышло..

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

Первым шагом будет создание HTML-документа, с подключением скриптов, разместив их между тегами head:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Галерея с помощью технологии drag-and-drop</title>

</head>

Как можно заметить, мы подсоединяем библиотеки Fancybox и jQuery, jquery-css-transform.js и jquery-animate-css-rotate-scale.js (нужны для вращения и масштабирования), css файлы и наш код JavaScript.

После этого мы создаем непосредственно саму разметку изображений, хочу обратить ваше внимание, что для галереи мы будем использовать большие изображения и миниатюры (thumb_pic1.jpg, thumb_pic2.jpg .. thumb_pic12.jpg) и полноразмерные изображения (pic1.jpg, pic2.jpg .. pic12.jpg)

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Теперь создаем стили CSS, в них мы будем стилизовать саму галерею, а именно рамки к изображениям, фон нашей галереи и многое другое..

body {

background:#eee;

margin:0;

padding:0;

}

.example {

position:relative;

background-color:#fff;

width:700px;

overflow:hidden;

border:1px #000 solid;

margin:20px auto;

padding:20px;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

}

#gallery {

height:600px;

position:relative;

width:100%;

}

#gallery div,#gallery div a {

height:128px;

overflow:hidden;

width:192px;

}

#gallery div {

background-color:#fff;

background-position:50% 50%;

background-repeat:no-repeat;

border:2px solid #000;

left:250px;

padding:5px;

position:absolute;

top:200px;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

-moz-box-shadow:3px 3px 4px #444;

-webkit-box-shadow:3px 3px 4px #444;

box-shadow:3px 3px 4px #444;

}

#gallery div a {

display:block;

text-indent:-1000px;

}

Теперь рассмотрим некоторые функции JavaScript, например команда $('#gallery div').draggable({ делает изображение перетаскиваемым:

$(document).ready(function(){ // когда документ готов

// располагаем фотографии в случайном порядке

$('#gallery div').each(function() {

var iRL = Math.floor(Math.random() * 500);

var iRT = Math.floor(Math.random() * 350);

var iMT = Math.floor(Math.random() * 100 - 50);

$(this).animate({

left: iRL,

top: iRT,

rotate: iMT + 'deg',

}, 2000);

});

var bPrevClick = false; // отключение реакции на нажатие кнопки мыши решает проблемы с fancybox при перетаскивании

$('#gallery div').draggable({ // делаем фотографии перетаскиваемыми

containment: 'parent',

start: function(e,ui) {

bPrevClick = true;

stop: function(e, ui) {

setTimeout(function() {

bPrevClick = false;

}, 50);

}

});

$('#gallery div a').bind('click',function(e) {

if (bPrevClick) {

e.preventDefault();

e.stopImmediatePropagation();

}

});

$('#gallery div').mousedown(function(e) { // событие нажатия кнопки мыши

var iMZ = 0;

$('#gallery div').each(function() { // ищем максимальный zIndex

var z = parseInt($(this).css('zIndex'))

iMZ = (z > iMZ) ? z : iMZ;

});

$(e.target).closest('#gallery div').css({ // поднимаем активное изображение

zIndex: iMZ + 1

});

$('a.fancybox').fancybox({ // инициализация fancybox

zoomSpeedIn: 500, // скорость увеличения

zoomSpeedOut: 500, // скорость уменьшения

overlayShow: false // отключаем маскирующий слой

});

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