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

jQuery 30.04.2013

Продолжаем рассматривать интересные галереи для сайта. В сегодняшнем уроке мы рассмотрим весьма интересную вещь, а именно технологию 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 // отключаем маскирующий слой
    });
});

На этом галерея готова. В некоторых браузерах возможно легкое притормаживание, а так все работает достаточно красиво. Материал взят из зарубежного источника - script-tutorials.com/nice-css3-lightbox-gallery-with-jquery и представлен исключительно в ознакомительных целях.