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

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

Первый шаг: HTML

Как всегда, начнем с HTML

    Фотогалерея AJAX (jQuery) с наборами изображений в массиве JavaScript | Материалы сайта RUSELLER.COM

<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></pre>
<div class="example">
<h2>Фотогалерея AJAX (jQuery) с наборами изображений в массиве JavaScript</h2>
<div id="gallery">
 <img id="photo" src="images/pic1.jpg" alt="" /></div>
</div>
<pre>

Все изображения будут загружены только после загрубения самой страницы.

Второй шаг: 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%;
}

Третий шаг: . JS (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('</pre>
<ul>
	<li><a id="'+key+'" title="'+key+'" href="#">'+key+'</a></li>
</ul>
<pre>

');
            });

            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('</pre>
<ul>
	<li><img id="' + g.setimgs[index] + '" src="images/thumb_' + g.setimgs[index] + '" alt="" /></li>
</ul>
<pre>
');

            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().

Четвертый шаг: изображения

Все изображения расположены в папке images.

Демо

Исходники