Продолжаем рассматривать интересные галереи для сайта. В сегодняшнем уроке мы рассмотрим весьма интересную вещь, а именно технологию 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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Галерея с помощью технологии drag-and-drop</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</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 id="gallery">
<div id="1" style="background-image:url(images/thumb_pic1.jpg)">
<a href="images/pic1.jpg" target="_blank">Фото 1</a>
</div>
<div id="2" style="background-image:url(images/thumb_pic2.jpg)">
<a href="images/pic2.jpg" target="_blank">Фото 2</a>
</div>
<div id="3" style="background-image:url(images/thumb_pic3.jpg)">
<a href="images/pic3.jpg" target="_blank">Фото 3</a>
</div>
<div id="4" style="background-image:url(images/thumb_pic4.jpg)">
<a href="images/pic4.jpg" target="_blank">Фото 4</a>
</div>
<div id="5" style="background-image:url(images/thumb_pic5.jpg)">
<a href="images/pic5.jpg" target="_blank">Фото 5</a>
</div>
<div id="6" style="background-image:url(images/thumb_pic6.jpg)">
<a href="images/pic6.jpg" target="_blank">Фото 6</a>
</div>
<div id="7" style="background-image:url(images/thumb_pic7.jpg)">
<a href="images/pic7.jpg" target="_blank">Фото 7</a>
</div>
<div id="8" style="background-image:url(images/thumb_pic8.jpg)">
<a href="images/pic8.jpg" target="_blank">Фото 8</a>
</div>
<div id="9" style="background-image:url(images/thumb_pic9.jpg)">
<a href="images/pic9.jpg" target="_blank">Фото 9</a>
</div>
<div id="10" style="background-image:url(images/thumb_pic10.jpg)">
<a href="images/pic10.jpg" target="_blank">Фото 10</a>
</div>
<div id="11" style="background-image:url(images/thumb_pic11.jpg)">
<a href="images/pic11.jpg" target="_blank">Фото 11</a>
</div>
<div id="12" style="background-image:url(images/thumb_pic12.jpg)">
<a href="images/pic12.jpg" target="_blank">Фото 12</a>
</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 // отключаем маскирующий слой
});
});На этом галерея готова. В некоторых браузерах возможно легкое притормаживание, а так все работает достаточно красиво. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
