Галерея с помощью технологии drag-and-drop
Продолжаем рассматривать интересные галереи для сайта. В сегодняшнем уроке мы рассмотрим весьма интересную вещь, а именно технологию drag-and-drop («перетащи-и-брось»), добавив к ней плагин fancybox, который позволит открывать изображение в оригинальный размер, в модальном окне. Смотрится достаточно красиво, весьма заинтересовывая пользователей своей оригинальностью и свободой действий, а именно, перетаскивание изображений по холсту. Вот что у нас с этого вышло..
Первым шагом будет создание HTML-документа, с подключением скриптов, разместив их между тегами head:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<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, в них мы будем стилизовать саму галерею, а именно рамки к изображениям, фон нашей галереи и многое другое..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
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({
делает изображение перетаскиваемым:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
$(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 // отключаем маскирующий слой }); }); |
На этом галерея готова. В некоторых браузерах возможно легкое притормаживание, а так все работает достаточно красиво. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 18.10.2011 в 18:17, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |