главная

Теги:


Портфолио с масштабированием миниатюр.

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

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


Разметка HTML

Для каждого пункта создадим элемент div. Добавим элемент для слайдера миниатюр, который получит класс “thumb_wrapper”, и элемент для описания соответствующего имени класса:

  • Флот 1
  • ...
  • ...
Поместите курсор мыши на изображение для увеличения. Нажмите кнопку мыши для просмотра полноразмерного изображения

Русский флот

Несколько картин посвященных истории Русского военного флота. Автор: Емишев Е.С.

Ссылка, которая содержит миниатюру, указывает на полноразмерное изображение. Оба плагина будут использовать преимущества данной структуры. Они будут строить свои элементы на основании информации из атрибута href.

Дополнительно добавим следующие атрибуты и класс для каждого элемента ссылки:

...

 Атрибут “rel” используется обеими плагинами, но изменяется плагином Fancybox, поэтому он использует атрибут “rev”. Плагин Fancybox может создать галерею, если установить одинаковое значение для атрибута “rev” группе изображений. Таким образом, миниатюры в первом пункте будут иметь значение “group1″ для атрибута rev, а во второй группе - “group2″.

Для конфигурации плагина Cloud Zoom, мы добавим некоторые параметры к атрибуту “rel”.

Значение position:’body’ используется в скрипте JavaScript.

.item{
	    float:left;
	    width:100%;
	    clear:both;
	    margin:35px 0px;
	}

Теперь, позиционируем thumb_wrapper, который содержит навигацию и слайдер миниатюр:

.thumb_wrapper{
	    width:290px;
	    height:107px;
	    position:relative;
	    float:left;
	    margin:20px 40px 0px 0px;
	}

Элементы навигации позиционируются абсолютно. Поэтому родительский элемент имеет относительное позиционирование. Общий стиль для элементов навигации будет таким:

.thumb_wrapper a.prev,
	.thumb_wrapper a.next{
	    width:30px;
	    height:30px;
	    position:absolute;
	    top:50%;
	    margin-top:-15px;
	    outline:none;
	    cursor:pointer;
	}

А индивидуальные стили для элементов навигации будут следующими:

.thumb_wrapper a.prev{
	    left:0px;
	    background:transparent url(../images/fancy_nav_left.png) no-repeat top left;
	}
	.thumb_wrapper a.next{
	    right:0px;
	    background:transparent url(../images/fancy_nav_right.png) no-repeat top left;
	}

Стиль маленького информационного блока под слайдером:

.thumb_wrapper span{
	    display:block;
	    text-align:center;
	    font-size:11px;
	    font-style:italic;
	    margin-top:3px;
	}

Элемент thumb - контейнер для неупорядоченного списка миниатюр. Свойство overflow: hidden; установлено потому, что список надо скрыть:

.thumb{
	    margin-left:40px;
	    width:210px;
	    height:107px;
	    overflow:hidden;
	    -moz-box-shadow:1px 1px 3px #555;
	    -webkit-box-shadow:1px 1px 3px #555;
	    box-shadow:1px 1px 3px #555;
	}

Элемент ul для миниатюр будет иметь динамически вычисляемую ширину, которая будет заменять следующее значение:

.thumb ul{
	    list-style:none;
	    width:800px;
	    height:107px;
	}

Пункты списка будут смещаться влево, поэтому все миниатюры будут выстраиваться в одну линию. Идея заключается в том, чтобы анимировать перемещение элементов списка при выборе следующего/предыдущего элемента.

.thumb ul li{
	    float:left;
	}

Устанавливаем декорацию для миниатюр:

.thumb ul li a img{
	    border:5px solid #fff;
	}

Описание будет смещаться справа от слайдера:

.description{
	    width:620px;
	    float:right;
	}

JavaScript

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

Начнем с включения стилей и скриптов. В раздел head нашего кода HTML:


Затем добавляем скрипты в конец кода HTML:





В нашей функции jQuery инициализируем плагин Fancybox и определяем его функционал слайдера. Как уже упоминалось ранее, параметры плагина Cloud Zoom устанавливаются в атрибуте “rel” элемента ссылки, который содержит миниатюру.

Инициализируем Fancybox:

$("#content .cloud-zoom").fancybox({
	'transitionIn'	:	'elastic',
	'transitionOut'	:	'none',
	'speedIn'	:	600,
	'speedOut'	:	200,
	'overlayShow'	:	true,
	'overlayColor'	:	'#000',
	'cyclic'	:	true,
	'easingIn'	:	'easeInOutExpo'
});

Нужно разрешить конфликт, который вызван тем, что плагин Cloud Zoom добавляет элемент div сверху нашего элемента ссылки. Он конфликтует с плагином Fancybox, который не может больше получить событие click на элементе ссылки (он перекрыт). Поэтому мы добавим небольшую функцию, которая будет генерировать событие click для элемента ссылки, когда мы пользователь будет нажимать на элементе div с классом “mousetrap”, который генерируется плагином Cloud Zoom:

$("#content .mousetrap").live('click',function(){
	$(this).prev().trigger('click');
});

Теперь определим несколько переменных для нашего слайдера:

var $content	= $('#content'),
$thumb_list = $content.find('.thumb > ul');

Список ul слайдера нуждается в установке ширины, которая будет суммой ширин всех миниатюр, содержащихся в нем. Также мы определяем обработчик события click для кнопок навигации:Список ul слайдера нуждается в установке ширины, которая будет суммой ширин всех миниатюр, содержащихся в нем. Также мы определяем обработчик события click для кнопок навигации:

$thumb_list.each(function(){
	var $this_list	= $(this),
	total_w		= 0,
	loaded		= 0,
	//предварительная загрузка изображений
	$images		= $this_list.find('img'),
	total_images= $images.length;
	$images.each(function(){
		var $img	= $(this);
		$('').load(function(){
			++loaded;
			if (loaded == total_images){
				$this_list.data('current',0).children().each(function(){
					total_w	+= $(this).width();
				});
				$this_list.css('width', total_w + 'px');

				//События next / prev

				$this_list.parent()
				.siblings('.next')
				.bind('click',function(e){
					var current = $this_list.data('current');
					if(current == $this_list.children().length -1) return false;
					var	next	= ++current,
					ml		= -next * $this_list.children(':first').width();

					$this_list.data('current',next)
					.stop()
					.animate({
						'marginLeft'	: ml + 'px'
					},400);
					e.preventDefault();
				})
				.end()
				.siblings('.prev')
				.bind('click',function(e){
					var current = $this_list.data('current');
					if(current == 0) return false;
					var	prev	= --current,
					ml		= -prev * $this_list.children(':first').width();

					$this_list.data('current',prev)
					.stop()
					.animate({
						'marginLeft'	: ml + 'px'
					},400);
					e.preventDefault();
				});
			}
		}).attr('src',$img.attr('src'));
	});
});

Готово!

Скрипт плагина Fancybox немного модифицирован, чтобы выводить стрелки навигации постоянно, когда курсор мыши находится над полноразмерным изображением. Также мы адаптировали z-index элементов плагина Fancybox в таблице стилей (мы добавили 10000 к каждому свойству z-index) для того, чтобы все работало с другими элементами и элементами Cloud Zoom. В код плагина Cloud Zoom добавлено позиционирование элемента масштабирования при абсолютном позиционировании миниатюры.


Источник урока: tympanus.net/codrops/2010/12/27/portfolio-zoom-slider/

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

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


Copyright© 2009 Hosted by Zhost