Галерея изображений с эффектом аккордеона

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

demosourse

Подобные эффекты можно использовать на сайте для организации компактного отображения информации. Например, как на сайте auroraos.com.

Аккордеон для изображений

 

HTML

Структура HTML разметки достаточно проста:

<div id="container">
    <div id="img_container">
        <img id="img1" src="img/01.jpg"/>
        <img id="img2" src="img/02.jpg"/>
        <img id="img3" src="img/03.jpg"/>
        <img id="img4" src="img/04.jpg"/>
        <img id="img5" src="img/05.jpg"/>
    </div>
</div>

Изображения вложены в контейнер img_container, который в свою очередь вкладывается в контейнер container.

 

CSS

CSS также не представляет сложностей. Внешний контейнер должен иметь свойство overflow: hidden;, чтобы отрезать все изображения которые выходят за его границы. Сами изображения располагаются в одну линию и плотно прижимаются друг к другу . Их смещение в рабочее положение будет выполнять код JavaScript. Также устанавливаются свойства z-index для картинок, чтобы они накладывались в правильном порядке одна на другую. В коде используются правила для создания теней и скругленных углов.

    #container {
        margin: 0 auto;
        margin-top: 50px;
        width: 800px;
        height: 350px;
        overflow: hidden;
        border: 10px solid #000;
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
    }
    #img_container {
        width: 4000px;
    }
    #img_container img {
        position: relative;
        -moz-box-shadow: -5px 0 10px #000;
        -webkit-box-shadow: -5px 0 10px #000;
        box-shadow: -5px 0 10px #000;
        width: 600px;
	float: left;
	margin: 0;
	}
    #img1 { z-index: 0; }
    #img2 { z-index: 1; }
    #img3 { z-index: 2; }
    #img4 { z-index: 3; }
    #img5 { z-index: 4; }

 

JavaScript

В примере используется jQuery. Так что нужно подключить его к файлу HTML.

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

    $(document).ready(function() {
        var cwidth = parseInt($("#container").css("width").replace("px", "")); 	// Получаем ширину контейнера с изображениями
        var img_count = $("#img_container").children().length;			// Количество изображений
        var img_width = $("#img1").width();					// Ширина одного изображения
        var divider = cwidth / img_count;			     		// Ширина полоски, выделяемой для изображения в отсутствии курсора мыши над контейнером
        var small_space = (cwidth - img_width) / (img_count - 1);		// Ширина полоски, выделяемой для изобржаения при наличии курсора мыши над контейнером
		var timer = null;														// Таймер 

        // Устанавливаем позиции изображений
        var cssleft = Array();							
        $("#img_container img").each(function(index) {
			// Координаты хранятся в массиве
            cssleft[index] = new Array(); 				
            // Вычисляем и устанавливаем позицию изображения при отсутстсвии курсора мыши над контейнером
            cssleft[index][0] = (index * divider) - (index * img_width);
            $(this).css("left", cssleft[index][0] + "px");

            // Вычисляем позицию изображения при наведенном на него курсоре мыши
            cssleft[index][1] = (index * small_space) - (index * img_width);

            // Вычисляем координату правого угла изобржаения
            var index2 = index;
            if (index2 == 0) {
                index2++;
            }
            cssleft[index][2] = cssleft[index2 - 1][1];
        });

        // Курсор мыши над изображением 
        $("#img_container img").mouseenter(function() {
		
			if (timer) {
				clearTimeout(timer);
				timer = null;
			}
			
			var self = this;
			
			// Таймер используется для предотвращения "дергания" при быстром перемещении курсора мыши
			// над контейнером с изображениями
			timer = setTimeout(function() { 
			
				var img_id = parseInt($(self).attr("id").replace("img", "")) - 1;

				if ($(self).attr("id") != "img1") {
					$(self).animate({ 
						left: cssleft[img_id][1] 
					}, 300);
				}                
				loopNext(self);
				loopPrev(self);
			}, 200)
			
        });

	// Когда курсор мыши покидает контейнер изображений, возвращаем все в исходное состояние
        $("#img_container").mouseleave(function() {
			if (timer){
				clearTimeout(timer);
				timer = null;
			}
			
            $("#img_container img").each(function(index) {
                $(this).animate({
                    left: cssleft[index][0]
                }, 300);
            });
        });
	
	// Функция для установки изображений, предшествующих активному
        function loopPrev(el) {
            if ($(el).prev().is("img")) {
                var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

                if ($(el).prev().attr("id") != "img1") {
                    $(el).prev().animate({
                        left: cssleft[imgprev_id - 2][1]
                    }, 300);
                }
                loopPrev($(el).prev());
            }
        }
	
	//Функция установки изображений, следующих за активным	
        function loopNext(el) {
            if ($(el).next().is("img")) {
                var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

                $(el).next().animate({
                    left: cssleft[imgnext_id][2]
                }, 300);
                loopNext($(el).next());
            }
        }
    });

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: superdit.com/2011/05/14/sliding-stacked-images-with-jquery/
Перевел: Сергей Фастунов
Урок создан: 5 Июля 2011
Просмотров: 47659
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^