Отличная галерея на CSS3 и jQuery

В данном уроке мы создадим отличную галерею изображений на CSS3 и jQuery (с комбинацией техники "перетащи-и-брось" и плагина fancybox). Фотографии будут разбросаны по поверхности экрана, их можно перетаскивать и открывать для просмотра.

 

Шаг 1. Разметка HTML

Создадим документ HTML для нашей галереи. Сначала идет раздел заголовка:

<!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>Отличная галерея CSS3 с использованием Lightbox | Матреиалы сайта RUSELLER.COM</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.

Затем в тело документа добавляем код для изображений:

<div id="gallery">
        <div id="1" style="background-image: url('/images/thumb_pic1.jpg')">
            <a class="fancybox" href="/images/pic1.jpg" target="_blank">Фото 1</a>
        </div>
        <div id="2" style="background-image: url('/images/thumb_pic2.jpg')">
            <a class="fancybox" href="/images/pic2.jpg" target="_blank">Фото 2</a>
        </div>
        <div id="3" style="background-image: url('/images/thumb_pic3.jpg')">
            <a class="fancybox" href="/images/pic3.jpg" target="_blank">Фото 3</a>
        </div>
        <div id="4" style="background-image: url('/images/thumb_pic4.jpg')">
            <a class="fancybox" href="/images/pic4.jpg" target="_blank">Фото 4</a>
        </div>
        <div id="5" style="background-image: url('/images/thumb_pic5.jpg')">
            <a class="fancybox" href="/images/pic5.jpg" target="_blank">Фото 5</a>
        </div>
        <div id="6" style="background-image: url('/images/thumb_pic6.jpg')">
            <a class="fancybox" href="/images/pic6.jpg" target="_blank">Фото 6</a>
        </div>
        <div id="7" style="background-image: url('/images/thumb_pic7.jpg')">
            <a class="fancybox" href="/images/pic7.jpg" target="_blank">Фото 7</a>
        </div>
        <div id="8" style="background-image: url('/images/thumb_pic8.jpg')">
            <a class="fancybox" href="/images/pic8.jpg" target="_blank">Фото 8</a>
        </div>
        <div id="9" style="background-image: url('/images/thumb_pic9.jpg')">
            <a class="fancybox" href="/images/pic9.jpg" target="_blank">Фото 9</a>
        </div>
        <div id="10" style="background-image: url('/images/thumb_pic10.jpg')">
            <a class="fancybox" href="/images/pic10.jpg" target="_blank">Фото 10</a>
        </div>
        <div id="11" style="background-image: url('/images/thumb_pic11.jpg')">
            <a class="fancybox" href="/images/pic11.jpg" target="_blank">Фото 11</a>
        </div>
        <div id="12" style="background-image: url('/images/thumb_pic12.jpg')">
            <a class="fancybox" href="/images/pic12.jpg" target="_blank">Фото 12</a>
        </div>
    </div>

 

Шаг 2. 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;
}


 

Шаг 3. JavaScript

$(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 // отключаем маскирующий слой
    });
});

 

Шаг 4. Изображения.

Все изображения хранятся в папке ‘images’. здесь располагаются миниатюры (thumb_pic1.jpg, thumb_pic2.jpg .. thumb_pic12.jpg) и полноразмерные изображения(pic1.jpg, pic2.jpg .. pic12.jpg)


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ll-50yMk5tc/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Отличная галерея на CSS3 и jQuery | | 2012-06-19 12:03:26 | | Статьи Web-мастеру | | В данном уроке мы создадим отличную галерею изображений на CSS3 и jQuery (с комбинацией техники перетащи-и-брось и плагина fancybox). Фотографии будут разбросаны по поверхности экрана, их можно | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: