главная

Теги:


Галерея с вращением изображений

В данном уроке с помощью jQuery и вращений CSS3, а также плагина jQuery Rotate мы создадим прекрасное слайдшоу. Его можно будет использовать на своем сайте для демонстрации портфолио или свойств продукта.

HTML

По обыкновению, начнем с HTML разметки для слайдшоу. Основной контейнер div #slideShowContainer содержит div #slideShow и ссылки на предыдущий/следующий слайд (они будут преобразованы в стрелки с помощью CSS).

index.html






Вращающееся слайд шоу | Демонстрация для RUSELLER.COM





  • Town
  • Alien
  • Elf
  • Red Pegas
» «

Слайды определяются как элементы li в неупорядоченном списке. Обратите внимание, что ширина изображений устанавливается в значение 100%. Таким образом, они масштабируются в соответствии с шириной div #slideShow.

Внизу включается библиотека jQuery, наш собственный скрипт script.js и плагин jQuery Rotate. Мы используем плагин, поэтому вращения CSS3 будут организованы в кросс-браузерном варианте, о чем будет сказано далее в уроке.

Структура разметки

CSS

styles.css

#slideShowContainer{
	width:510px;
	height:510px;
	position:relative;
	margin:120px auto 50px;
}

#slideShow{
	position:absolute;
	height:490px;
	width:490px;
	background-color:#fff;
	margin:10px 0 0 10px;
	z-index:100;
	
	-moz-box-shadow:0 0 10px #111;
	-webkit-box-shadow:0 0 10px #111;
	box-shadow:0 0 10px #111;
}

#slideShow ul{
	position:absolute;
	top:15px;
	right:15px;
	bottom:15px;
	left:15px;
	list-style:none;
	overflow:hidden;
}

#slideShow li{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#slideShowContainer > a{
	border:none;
	text-decoration:none;
	text-indent:-99999px;
	overflow:hidden;
	width:36px;
	height:37px;
	background:url('../img/arrows.png') no-repeat;
	position:absolute;
	top:50%;
	margin-top:-21px;
}

#previousLink{
	left:-38px;
}

#previousLink:hover{
	background-position:bottom left;
}

a#nextLink{
	right:-38px;
	background-position:top right;
}

#nextLink:hover{
	background-position:bottom right;
}

Хотя ширина элемента div #slideShow устанавливается равной 490px, его реальный размер составляет 510px. Разница в 20px переходит и на слайды (так как они привязаны к ширине элемента div #slideShow), которые уменьшаются от их нормального размера 480px до 460px. С помощью анимации jQuery они будут увеличиваться до полного размера. Таким образом, даже при использовании масштабирования изображения отображаются в своем реальном размере без потери качества.

jQuery

Хотя большинство современных браузеров поддерживает вращения CSS3, установка специфических для разных браузеров свойств является весьма скучным и утомительным занятием. К счастью, существуют плагины, которые берут на себя всю возню с обеспечением кросс-браузерности. В данном уроке используется плагин jQuery Rotate, который также хорошо интегрирован с методами animate() и css(). Поэтому мы можем легко анимировать вращение элементов. Для этого используется пользовательское событие rotateContainer, обработчик которого вращает div #slideShow.

script.js – Часть 1

$(document).ready(function(){
	
	var slideShow = $('#slideShow'),
		ul = slideShow.find('ul'),
		li = ul.find('li'),
		cnt = li.length;

	// Так как изображения позиционируются абсолютно, то последнее выводится сверху.
	// Поэтому им назначается правильный порядок z-index:
	
	updateZindex();

	if($.support.transform){
	
		// Современные браузеры с поддержкой трансформаций css3
	
		li.find('img').css('rotate',function(i){
			// Вращаем изображение против часовой стрелки
			return (-90*i) + 'deg';
		});
	
		// Привязываем обработчик пользовательского события. Направление и угол поворота 
		// передаются в качестве параметров, когда событие генерируется позже в коде.
	
		slideShow.bind('rotateContainer',function(e,direction,degrees){
			
			// Увеличиваем слайдшоу и фотографии:
			
			slideShow.animate({
				width		: 510,
				height		: 510,
				marginTop	: 0,
				marginLeft	: 0
			},'fast',function(){
				
				if(direction == 'next'){
				
					// Перемещаем элемент LI с верхним изображением 
					// вниз после выполнения анимации затухания.
					
					$('li:first').fadeOut('slow',function(){
						$(this).remove().appendTo(ul).show();
						updateZindex();
					});
				}
				else {
					
					// Выводим самый нижний элемент LI наверх с эффектом проявления. 
					// При этом изменяем z-index.
					
					var liLast = $('li:last').hide().remove().prependTo(ul);
					updateZindex();
					liLast.fadeIn('slow');
				}
				
				// Вращаем слайдшоу. css('rotate') дает нам значение угла поворота в радианах.
				// Конвертируем их в градусы, чтобы можно было добавить/вычесть 90 градусов 
				// для получения нового значения.
				
				slideShow.animate({				
					rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
				},'slow').animate({
					width		: 490,
					height		: 490,
					marginTop	: 10,
					marginLeft	: 10
				},'fast');
				
			});
		});
		
		// С помощью генерации пользовательского события, 
		// мы можем показать предыдущее/следующее изображение в слайдшоу.
		
		slideShow.bind('showNext',function(){
			slideShow.trigger('rotateContainer',['next',90]);
		});
		
		slideShow.bind('showPrevious',function(){
			slideShow.trigger('rotateContainer',['previous',-90]);
		});
	}

 Для проверки поддержки браузером трансформаций CSS3 используется объект jQuery $.support. Вращения будут выводиться только в тех браузерах, которые их поддерживают, таких как Firefox, Chrome, Safari и Opera, а в старых версиях будет использоваться эффект затухания для перехода между слайдами.

Internet Explorer предлагает решение для вращения элементов на основе использования собственного свойства filter, но мы не будем использовать данную технику для нашего слайдшоу. Таким образом, слайдшоу будет работать во всех браузерах, но во всей красе его можно будет увидеть только в тех, которые поддерживают трансформации CSS3.

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

script.js – Часть 2

	else{
		
		// Альтернатива для Internet Explorer и старых браузеров
		
		slideShow.bind('showNext',function(){
			$('li:first').fadeOut('slow',function(){
				$(this).remove().appendTo(ul).show();
				updateZindex();
			});
		});
		
		slideShow.bind('showPrevious',function(){
			var liLast = $('li:last').hide().remove().prependTo(ul);
			updateZindex();
			liLast.fadeIn('slow');
		});
	}
	
	// Ловим событие click на стрелочках,
	// и генерируем соответствующее пользовательское событие
	
	$('#previousLink').click(function(){
		if(slideShow.is(':animated')){
			return false;
		}
		
		slideShow.trigger('showPrevious');
		return false;
	});
	
	$('#nextLink').click(function(){
		if(slideShow.is(':animated')){
			return false;
		}
		
		slideShow.trigger('showNext');
		return false;
	});
	
	// Данная функция обновляет свойство z-index.
	function updateZindex(){
		
		// Метод css может использовать функцию в качестве второго параметра.
		// Она служит для вычисления индекса элемента
		
		ul.find('li').css('z-index',function(i){
			return cnt-i;
		});
	}

});

Во второй части кода содержится фрагмент, который выполняется только в браузерах, не поддерживающих трансформации CSS3. В данном случае мы также используем пользовательские события showNext и showPrevious, но при переходе между слайдами используется проявление/растворение изображения без вращения.

Функция updateZindex() используется для установки правильного порядка вывода слайдов. Она присваивает свойству z-index соответствующие порядку следования значения, поэтому первый слайд выводится первым, а не последним (если оставить все по умолчанию).

Ограничение

Количество слайдов в галерее должно быть кратным 4. Так как поворот осуществляется для всего внешнего элемента, а угол вращения составляет 90 градусов. Поэтому при количестве изображений, кратном 4, Первое изображение в галерее повернуто относительно последнего на 90 градусов, и при переходе от одного слайда к другому все изображения занимают правильное положение. Но если изображений будет, например 5, то первый и последний слайды будут повернуты друг относительно друга на угол 270 градусов и при переходе от первого к последнему слайду или от последнего к первому изображение выводимого слайда окажется в положении "на боку".

Готово!

Источник урока: tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/

Урок Создан:2011-02-08 Просмотров:2489

Добавить комментарий:


Copyright© 2009 Hosted by Zhost