Мозаичное слайдшоу

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

В данном уроке мы разберем создание мозаичного слайдшоу. Название "мозаичное" оно получило по эффекту перехода от одного слайда к другому.

demosourse

Шаг 1 – XHTML

Эффект мозаики достигается путем разделения оригинала изображения на маленькие ячейки. Данные ячейки, которые содержат части изображения, последовательно скрываются, что и образовывает нужный нам эффект. Разметка слайдшоу весьма проста. Она состоит из основного контейнера  (#mosaic-slideshow), стрелки вправо и влево для переключения на следующее и предыдущее изображения, и элементов div мозаичного слайда, которые вставляются скриптом в ходе показа страницы.

demo.html

<div id="mosaic-slideshow">
	<div class="arrow left"></div>
	<div class="arrow right"></div>

	<div class="mosaic-slide" style="z-index: 10;">

		<!-- Элемент div мозаичного слайда и ячейки, генерируемые jQuery -->
		<div class="tile" style="..."></div>
		<div class="tile" style="..."></div>
		<div class="tile" style="..."></div>
		<div class="tile" style="..."></div>

	</div>
</div>

Элемент div с классом mosaic-slide добавляется к странице jQuery после выполнения функции JavaScript transition(). Внутри него размещаются элементы div с классом  tile. Всего будет 56 таких элементов, каждый из которых содержит часть изображения слайда размером 60px на 60px в качестве фона.

Представление слайдшоу

Шаг 2 – CSS

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

styles.css – Часть 1

#mosaic-slideshow{
	/* Контейнер слайдшоу */
	height:500px;
	margin:0 auto;
	position:relative;
	width:670px;
}

.mosaic-slide{
	/* Данный класс используется всеми слайдами */
	left:80px;
	position:absolute;
	top:25px;
	
	border:10px solid #555;
	
	/* Скругленные углы CSS3 */
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
}

.tile{
	/* Отдельные ячейки */
	height:60px;
	width:60px;
	float:left;
	border:1px solid #555;
	border-width:0 1px 1px 0;
	background-color:#555;
}

Слайдшоу содержится внутри элемента div с ID mosaic-slideshow (#mosaic-slideshow, если использовать его в  качестве селектора CSS / jQuery).  Может быть только один такой элемент на странице, поэтому используется атрибут ID.

Однако элементов div mosaic-slide будет больше, чем один. Технология эффекта заключается в размещении двух слайдов, один над другим, и скрытии ячеек верхнего слайда, чтобы показать второй. Поэтому используется класс вместо атрибута ID.

Также используется правило CSS3 для установки скругленных углов. Нужно использовать префиксы для правил для различных браузеров.

styles.css – Часть 2

.arrow{
	/* Стрелки следующий/предыдущий */
	width:35px;
	height:70px;
	background:url("img/arrows.png") no-repeat;
	position:absolute;
	cursor:pointer;
	top:50%;
	margin-top:-35px;
}

.arrow.left{
	left:15px;
	background-position:center top;
}

.arrow.left:hover{
	background-position:center -70px;
}

.arrow.right{
	right:15px;
	background-position:center -140px;
}

.arrow.right:hover{
	background-position:center -210px;
}

.clear{
	/* Данный класс изменяет порядок обтекания плавающего блока */
	clear:both;
}

Класс arrow используется стрелками для перехода на предыдущее и следующее изображения. Также для них требуется установить несколько индивидуальных правил. В качестве фонового изображения для элементов div стрелок используется спрайт CSS. Он содержит изображения обычного и активированного состояния для обеих стрелок.

Мозаичный слайд

Шаг 3 – jQuery

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

  • transition() – данная функция выполняет анимированный переход между текущим отображаемым слайдом и новым слайдом, заданным параметром id. Принцип работы заключается в позиционировании нового слайда, который надо вывести, позади текущего, и скрытии ячеек текущего слайда одна за другой;
  • generateGrid() – данная функция используется функцией transition() для генерации сетки ячеек. Каждая ячейка содержит часть слайда в качестве фона;
  • next() – определяет следующий слайд и выполняет функцию transition() с его индексом;
  • prev() – аналогична функции next(), только для предыдущего слайда.

script.js – Часть 1

/* Слайды содержатся в массиве slides. */
var slides = new Array('img/slide_1.jpg',
					   'img/slide_2.jpg',
					   'img/slide_3.jpg',
					   'img/slide_4.jpg',
					   'img/slide_5.jpg');


$(document).ready(function(){
	/* Код выполняется после полной загрузки DOM */

	$('.arrow.left').click(function(){
		prev();
		
		/* Сброс таймера автопереключения между слайдами в случае нажатия кнопки  перехода к другому слайду */
		clearInterval(auto);
	});
	
	$('.arrow.right').click(function(){
		next();
		clearInterval(auto);
	});

	/* Предварительная загрузка всех слайдов: */

	for(var i=0;i<slides.length;i++)
	{
		(new Image()).src=slides[i];
	}
	
	/* Выводим первый слайд: */
	transition(1);
	
	
	/* Устанавливаем интервал автопереключения между слайдами на 5 секунд */
	
	var auto;
	
	auto=setInterval(function(){
		next();
	},5*1000);
});

Метод $(document).ready() выполняется как только закончится загрузка страницы. Таким образом гарантируется, что все элементы будут доступны для скрипта. Внутри метода мы привязываем событие click к стрелочкам на предыдущее и следующее изображения, загружаем изображения, выводим первый слайд (иначе слайдшоу будет пустым) и устанавливаем интервал автопереключения между изображениями.

script.js – Часть 2

var current = {};
function transition(id)
{
	/* Данная функция выводит отдельный слайд. */
	
	if(!slides[id-1]) return false;
	
	if(current.id)
	{
		/* Если слайд показан в текущий момент: */
		if(current.id == id) return false;
		
		/* Перемещаем слой с текущим слайдом наверх: */
		current.layer.css('z-index',10);
		
		/* Удаляем все другие слои со слайдами, которые позиционируются ниже */
		$('.mosaic-slide').not(current.layer).remove();
	}
	
	/* Создаем новый слайд и заполняем его с помощью generateGrid: */
	var newLayer = $('<div class="mosaic-slide">').html(generateGrid({rows:7,cols:8,image:slides[id-1]}));

	/* Помещаем его позади текущего слайда: */
	newLayer.css('z-index',1);

	$('#mosaic-slideshow').append(newLayer);
	
	if(current.layer)
	{
		/* Скрываем каждую ячейку текущего слайда, открывая новый слайд: */
		$('.tile',current.layer).each(function(i){
			var tile = $(this);
			setTimeout(function(){
				tile.css('visibility','hidden');
			},i*20);
		})
	}
	
	/* Присваиваем текущий id и элемент newLayer текущему объекту: */
	current.id = id;
	current.layer = newLayer;
}

Функция transition использует глобальный объект current для хранения id текущего выводимого слайда и ссылки на элемент div текущего слайда. Информация используется в дальнейшем для предотвращения перехода слайда к самому себе и для удаления неиспользующегося более слайда после выполнения перехода.

Примечательна организация скрытия ячеек текущего слайда. Для этого устанавливается задержка в i*20 миллисекунд, где i - номер ячейки. Так как i увеличивается для каждой ячейки, то каждая следующая ячейка будет скрываться на 20 миллисекунд позже предыдущей, одна за другой.

script.js – Часть 3

function next()
{
	if(current.id)
	{
		transition(current.id%slides.length+1);
	}
}

function prev()
{
	if(current.id)
	{
		transition((current.id+(slides.length-2))%slides.length+1);
	}
	
}

/* Ширина и высота ячейки в пикселах: */
var tabwidth=60, tabheight=60;

function generateGrid(param)
{
	/* Данная функция генерирует набор ячеек, каждая из которых содержит часть изображения слайда */
	
	/* Создаем пустой объект jQuery: */
	var elem = $([]),tmp;
	
	for(var i=0;i<param.rows;i++)
	{
		for(var j=0;j<param.cols;j++)
		{
			tmp = $('<div>', {
					"class":"tile",
					"css":{
						"background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
					}
			});
			
			/* Добавляем ячейку к объекту jQuery: */
			elem = elem.add(tmp);
		}
		
		/* Добавляем элемент с классом clear в конец каждой строки. Таким образом, элементы div организуются в строки: */
		elem = elem.add('<div class="clear"></div>');
	}
	
	return elem;
}

Параметр, который передается функции generateGrid(), является объектом, который содержит количество строк, столбцов и изображение, которое будет использоваться как фон для ячеек. При генерации ячеек фоновое изображение смещается в соответствии с текущей позицией ячейки (строка и столбец). Затем ячейка добавляется к пустому объекту jQuery, который будет возвращаться из функции.

Мозаичное слайдшоу готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/
Перевел: Сергей Фастунов
Урок создан: 1 Ноября 2010
Просмотров: 30094
Правила перепечатки


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 1 Ноября 2010 16:35
    papalev
    Этот урок был уже!!!!!!!!!!!!!!!!!
  • 1 Ноября 2010 17:35
    dmitry
    Да пофиг, я не видел )))
  • 1 Ноября 2010 17:58
    НеБот
    Идрить-мадрить, было уже!!! [:||||:]
  • 1 Ноября 2010 19:20
    ldeimosl
    Баян
  • 1 Ноября 2010 20:31
    Slavoz
    Баянко
  • 1 Ноября 2010 21:08
    Димон
    Мне нравится.
  • 1 Ноября 2010 21:09
    Димон
    Только почему он в конце серый фон показывает?
  • 1 Ноября 2010 22:21
    peshekhonov
    Та было уже!!! Попов совсем за сайтом не следит
  • 2 Ноября 2010 18:17
    Вадим
    Где было то, не путай ... Нормальный урок ))) Зачет ...
  • 3 Ноября 2010 12:31
    neverfan
    Мегабаянище!!! Не нужно повторов!
  • 4 Ноября 2010 09:16
    mikola
    полная гармошка :)
  • 15 Ноября 2010 12:17
    burjuev
    млин, я не знаю господа..... и дамы, разумеется, где было, но мне вашпе понравилось, прикольно. P.S. "Попов вообще за сайтом не следит" 1. Сам попробуй за таким сайтом проследить. 2. Скажем спасибо за то что человек на шару скидывает такую базу знаний. P.S.S. Спасибо Женя тебе и твоей команде.
^ Наверх ^