Фотогалерея с использованием AJAX

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

 

Шаг 1. HTML

index.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>Фотогалерея AJAX (jQuery) с наборами изображений в массиве JavaScript | Материалы сайта RUSELLER.COM</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/css/style.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/main.js"></script>
</head>
<body>
    <div class="example">
        <h2>Фотогалерея AJAX (jQuery) с наборами изображений в массиве JavaScript</h2>
        <div id="gallery">
            <ul id="sets"></ul>
            <div id="loading"></div>
            <img id="photo" src="/images/pic1.jpg" />
            <ul id="thumbs"></ul>
        </div>
    </div>

</body>
</html>


Все изображения будут загружаться с помощью JavaScript после готовности страницы.

 

Шаг 2. CSS

css/style.css

* {
    margin:0;
    padding:0;
}
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    position:relative;
    background-color:#fff;
    width:850px;
    overflow:hidden;
    border:1px #000 solid;
    margin:20px auto;
    padding:20px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* Стили галереи */
#gallery {
    background-color:#888;
    height:630px;
    overflow:hidden;
    position:relative;
    width:800px;

    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
#gallery ul#sets {
    display:table;
    list-style:none outside none;
    margin:10px auto;
    overflow:hidden;
}
#gallery ul#sets li {
    float:left;
    margin-right:10px;
}
#gallery ul#sets li a {
    background-color:#000;
    color:#fff;
    cursor:pointer;
    display:block;
    font-size:14px;
    font-weight:normal;
    height:26px;
    line-height:26px;
    padding:10px 20px;
    text-decoration:none;

    -moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px 5px 5px 5px;
    background: -moz-linear-gradient(#363636, #010101); /* FF 3.6+ */  
    background: -ms-linear-gradient(#363636, #010101); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #363636), color-stop(100%, #010101)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#363636, #010101); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#363636, #010101); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#363636', endColorstr='#010101'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#363636', endColorstr='#010101')"; /* IE8+ */  
    background: linear-gradient(#363636, #010101); /* the standard */ 
}
#gallery ul#sets li a:hover{
    background-color:#ff6a11;

    background: -moz-linear-gradient(#ff9317, #ff6a11); /* FF 3.6+ */  
    background: -ms-linear-gradient(#ff9317, #ff6a11); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff9317), color-stop(100%, #ff6a11)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#ff9317, #ff6a11); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#ff9317, #ff6a11); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9317', endColorstr='#ff6a11'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9317', endColorstr='#ff6a11')"; /* IE8+ */  
    background: linear-gradient(#ff9317, #ff6a11); /* the standard */ 
}
#gallery #loading {
    text-align:center;
}
#gallery #photo {
    display:block;
    margin:10px auto;
}
#gallery ul#thumbs {
    bottom:-25px;
    left:250px;
    list-style:none outside none;
    margin:0 auto;
    opacity:0.5;
    overflow:hidden;
    position:absolute;
    width:300px;

    -moz-transition: bottom 0.5s ease-in-out;
    -ms-transition: bottom 0.5s ease-in-out;
    -o-transition: bottom 0.5s ease-in-out;
    -webkit-transition: bottom 0.5s ease-in-out;
    transition: bottom 0.5s ease-in-out;
}
#gallery ul#thumbs:hover {
    opacity:1;
    bottom:10px;
}
#gallery ul#thumbs li {
    border:1px solid #888;
    cursor:pointer;
    float:left;
    height:38px;
    width:58px;
}
#gallery ul#thumbs li:hover {
    border:1px solid #fff;
}
#gallery ul#thumbs li img {
    width:100%;
}

 

Шаг 3. JavaScript (jQuery)

js/main.js

// Определяем наборы изображений
var images = {
    'Набор 1' : [
        'pic1.jpg',
        'pic2.jpg',
        'pic3.jpg',
        'pic4.jpg',
        'pic5.jpg',
        'pic6.jpg',
        'pic7.jpg',
        'pic8.jpg',
        'pic9.jpg',
        'pic10.jpg'
    ],
    'Набор 2' : [
        'pic2.jpg',
        'pic3.jpg',
        'pic4.jpg',
        'pic5.jpg',
        'pic6.jpg',
        'pic7.jpg',
        'pic8.jpg',
        'pic9.jpg',
        'pic10.jpg',
        'pic11.jpg',
        'pic12.jpg',
        'pic5.jpg',
        'pic6.jpg',
        'pic7.jpg',
        'pic8.jpg'
    ],
    'Набор 3' : [
        'pic1.jpg',
        'pic2.jpg',
        'pic3.jpg',
        'pic4.jpg',
        'pic5.jpg',
        'pic6.jpg',
        'pic7.jpg',
        'pic8.jpg',
        'pic9.jpg',
        'pic10.jpg',
        'pic11.jpg',
        'pic12.jpg',
        'pic4.jpg',
        'pic5.jpg',
        'pic6.jpg'
    ]
};

$(document).ready(function(){ // Когда документ готов
    $('#gallery').gallery();
});


$.fn.gallery = function() {
    var self = this;
    var setimgs;

    this.each(function() {
        var g = this;

        g.load_sets = function(el) { // Функция - загружаем набор изображений
            $.each(images, function(key, value) { 
                $(el).append('<li><a id="'+key+'" href="#" title="'+key+'">'+key+'</a></li>');
            });

            var sets = $(el).find('li a');
            $(sets).click(function() { // Функция - привязываем событие click к набору
                var set = $(this).attr('id');
                g.setimgs = images[set];
                $(g).find('#thumbs').html('');
                g.load_thumbs($(g).find('#thumbs')[0], 0);

                $(g).find('#loading').html('Загрузка <strong>1</strong> из '+g.setimgs.length+' изображений');
            });

            sets[0].click();
        }

        g.load_thumbs = function(el, index) { // Функция - загрузка миниатюр
            $(el).append('<li><img id="' + g.setimgs[index] + '" src="/images/thumb_' + g.setimgs[index] + '" /></li>');

            var tn = new Image();
            $(tn).load(function() {
                var a = $($(el).find('li')[index]).find('img')[0];
                $(a).append(this);
                $(a).click(function() { // Функция привязываем событие click к миниатюрам
                    var i = $(this).attr('id');
                    $(g).find('#photo').attr('src', 'images/'+i);
                    return false;
                });

                if ((index + 1) < g.setimgs.length) {
                    g.load_thumbs(el, (index + 1));
                    $(g).find('#loading strong').html(index + 2);
                } else {
                    $(g).find('#loading').html('Загружено изображений: <strong>' + g.setimgs.length + '</strong>');
                    $($(g).find('#thumbs li img')[0]).click();
                }
            });
            tn.src = 'images/thumb_' + g.setimgs[index];
        }

        // Инициализация - загружаем набры для галаереи 
        g.load_sets($(g).find('#sets')[0]);
    });
};

Сначала определяется массив с наборами изображений. При инициализации происходит загрузка наборов, привязка событий и так далее. Инициализация галереи выполняется командой $(‘#gallery’).gallery();.

 

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

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

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

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

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



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

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