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

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

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
Просмотров: 45970
Правила перепечатки


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 5 Июля 2011 17:55
    da_lamber
    Забавно, но не везде эта галерея будет в тему.
  • 5 Июля 2011 18:38
    zspe
    А как она себя ведет на сенсорных мониторах? На планшете ей, как кажется, пользоваться неудобно.
    • 17 Августа 2011 13:51
      Dmitrych
      Да не я с Iphone 4 и ipad 2 пробовал нормально все работает
  • 5 Июля 2011 19:28
    Евгений Милушкин
    Странно, но после смены изображений влево, на новом остаются следы...
    • 5 Июля 2011 20:26
      Junк
      Это не следы, а эффект жалюзи вроде.
    • 6 Июля 2011 12:50
      user46577
      можно убрать, с помощью opacity: .99;
    • 6 Июля 2011 20:40
      rubyx
      никаких следов что-то я не заметил :) это "гармошка" ))
  • 6 Июля 2011 00:09
    notbot
    Боян! [:|||||:] Только аппетит разбудили... :(
    • 6 Июля 2011 20:41
      rubyx
      Точно и в этот момент у меня как раз пустой живот был:))
  • 6 Июля 2011 10:26
    du33
    Понравилась реализация.Хочу задать один вопрос, зачем вот это присваивание в коде: var self = this; Для чего это сделано ?
    • 6 Июля 2011 20:49
      rubyx
      что-то я тоже не понял роли этого
      var self = this;
      ?
      • 11 Июля 2011 15:49
        rlevv
        А как еще в setTimeout передать целый класс? Только так и можно. Вы же не напишете this внутри функции которая вызывается при помощи setTimeout, кому интересно попробуйте и будите приятно разочарованы Автор присваивает переменной ссылку на this и потом объявляет функцию в setTimeout, следовательно для этой функции объявленная переменная является глобальной. З.Ы. да поправят меня ПРО если че не то или не так сказал
  • 6 Июля 2011 14:18
    Алексей Курпачёв
    НЕКОТОРЫЕ КАРТИНКИ В ДЕМО ГЛЮЧАТ!
  • 6 Июля 2011 16:49
    ppaull
    в Опере линии остаются.
    • 6 Июля 2011 20:43
      rubyx
      я уже не обращаю внимания на Оперу и на ИЕ... :) пусть они там по своему работают...
  • 6 Июля 2011 20:51
    rubyx
    Мне понравилась "гармошка" и по
    моему её можно использовать в любых целях.
  • 12 Июля 2011 12:15
    wowchik744
    вкусно, вертикльные линии повляются на картинках
  • 21 Июля 2011 21:22
    evd1ser
    у меня почему то если добавить больше 6 изображений все что следуют дальше не появляется... буду признателен за помощь!!! :-)
  • 27 Июля 2011 14:47
    ALEHAN
    И кому нужна эта глючность? http://ruseller.com/lessons/les960/demo/index_1.htm То же самое по сути, да ещё и на чистом CSS работает прекрасно.
  • 30 Июля 2011 18:09
    fastghost
    Как можно вставить к каждой картинке url адрес ???
    • 3 Августа 2011 14:56
      Avaz
      <a href=""><img src=""></a>
  • 7 Октября 2011 17:54
    zeeeet
    Как добавить ссылку для изображения, если делаю вот так <a href="фывфывюфф.фыв"> <img id="img1" src="img/01.jpg"/> </a> Картинки перестают открываться в обратную сторону.Если просмотрел в одну сторону начинаешь вести мышку в другую сторону они,не раскрываються ,но ссылка работает для каждой своя.и чем фотография левее тем меньше она раскрываеться. Подскажите пожалуйста,java только начел изучать
  • 1 Декабря 2012 22:11
    CanVas
    Добавил 14 картинок. 12 показались. где ещё 2!? место то под них он оставляет, но не рисует!
  • 21 Февраля 2013 16:27
    respayn_ekb
    Никак не могу подключить эту галлерею для Wordpress 3.5.1 помогите
  • 13 Декабря 2013 17:28
    Витюганище
    Автор, мог бы и побольше прокоментировать код. Мне как новичку приходтся все равно что зубами скалу разгрызать
^ Наверх ^