Автор

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

Галерея с помощью технологии 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">
<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 // отключаем маскирующий слой
    });
});

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

Слайдер с различными эффектами переходов (7 различных эффектов, в том числе 3D). Адаптер представляет собой легкий контент-слайдер, простой интерфейс для разработчиков и создания 2D или 3D слайд анимации переходов.
Добавлена поддержка 3D для webkit и Mozilla, всех других браузерах будет запасной вариант изящно простой fade перехода при использовании 3D-эффекты.
Все 2D переходы между слайдами были протестированы в IE6+, и всех других современных браузерах.


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

Порой на сайте хочется выделить красиво какую либо информацию, тем самым привлечь внимание пользователя к необходимой информации. Все это можно сделать с помощью различных эффектов, в данном уроке мы рассмотрим как создать эффект размытия элементов сайта сайта с помощью CSS3 и jQuery.  Идея заключается в организации набора блоков с текстом, которые будут размываться и уменьшаться в масштабе при наведении курсора мыши на один из них. Блок, который получает фокус ввода, наоборот будет увеличиваться.


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

Сделаем CSS3 анимацию, которую можно будет использовать в качестве прелоадера, статуса загрузки чего-либо. Работает в Firefox, Chrome и Safari.


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

Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close