главная

Теги:


Фильтрация изображений в галерее

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

Принцип действия

На демонстрационной странице видно, что при смене фильтра изображения выводятся и скрываются с использованием эффекта горизонтального проскальзывания. Эффект получается с помощью манипулирования шириной элемента, то есть, при скрытии ширина элемента изменяется до 0px, а при выводе - до значения по умолчанию.

Для плавной трансформации ширины элемента, мы также будем изменять его прозрачность, то есть, при скрытии непрозрачность будет уменьшаться от 100% до 0,а при выводе - наоборот. Также будет использоваться функция jQuery animate() для того, чтобы трансформации свойств были видны пользователю.

Подготовка страницы

Мы создадим две отдельных секции. Первая будет содержать навигацию, а вторая - список элементов. Навигация содержит ссылки, которые будут управлять видимостью элементов:


	 
	

 

Каждый элемент навигации имеет атрибут rel, который соответствует категории. При выборе элемента навигации будут выводиться только те пункты второго списка, которые имеют соответствующий атрибут rel, а все остальные пункты будут скрываться. Зададим стили для элементов навигации. Установим свойству display значение inline-block, чтобы неупорядоченный список выводился горизонтально. Когда пользователь будет выбирать категорию, ей будет присваиваться класс “selected”. Класс “selected” имеет другой фон, тень и скругленные углы рамки для выделения элемента из общего ряда.

 

ul.menu {
	    margin-left: .5em;
	    margin-bottom: 1em;
	}
	 
	ul.menu li {
	    list-style-type: none;
	    display: inline-block;
	    font-weight: bold;
	    text-shadow: 1px 1px 0px #f3f5da;
	    padding: 2px 15px;
	}
	 
	    .selected {
	        -webkit-border-radius: 15px;
	        -moz-border-radius: 5px;
	        border-radius: 5px;
	        background: #acac75;
	        -webkit-box-shadow: 1px 1px 0px #8c8c5d;
	    }
	 
	    .selected a, .selected a:visited {
	        text-shadow: 1px 1px 0px #8c8c60;
	        color: #fff;
	}

Теперь установим стили для изображений. Каждое будет выводиться в отдельном блоке со смещением влево и полем 0.5em. Также нужно отключить маркеры элементов списка. Кроме того, мы устанавливаем внешнюю рамочку толщиной 5px, используем для нее скругленные углы с радиусом 5px и тень.

ul.item li {
	    list-style-type: none;
	    display: block;
	    float: left;
	    margin: .5em;
	}
	 
	    ul.item li img {
	        border: 5px solid #fff;
	        -webkit-border-radius: 5px;
	        -moz-border-radius: 5px;
	        border-radius: 5px;
	        -webkit-box-shadow: 0px 0px 5px #ac987e;
	        -moz-box-shadow: 0px 0px 5px #ac987e;
	        box-shadow: 0px 0px 5px #ac987e;
	    }

Создаем эффект с помощью функции animate()

Эффект проскальзывания изображений запускается, когда пользователь нажимает кнопку мыши на элементе навигации. Таким образом, нам надо добавить обработку события click для них. Обработчик события первым делом удаляет класс “selected” у всех элементов навигации и добавляет его для того, на котором произошло нажатие мыши. Так выделяется выбранный пункт.

$('.menu li a').click(function() {
	    $('.menu li').removeClass('selected');
	    $(this).parent('li').addClass('selected');

Затем берем значение атрибута rel и проверяем его. Если это “all” (что означает "все"), то выводим все изображения. В другом случае ищем все пункты списка с таким же значением атрибута rel и выводим их, а остальные - скрываем.

imgWidth = '52px';
	thisItem    = $(this).attr('rel');
	 
	if(thisItem != "all") {
	 
	    $('.item li[rel='+thisItem+']').stop()
	                       .animate({'width' : imgWidth,
	                         'opacity' : 1,
	                         'marginRight' : '.5em',
	                         'marginLeft' : '.5em'
	                    });
	                                                         
	    $('.item li[rel!='+thisItem+']').stop()
	                    .animate({'width' : 0,
	                         'opacity' : 0,
	                         'marginRight' : 0,
	                         'marginLeft' : 0
	                    });
	} else {
	     
	    $('.item li').stop()
	             .animate({'opacity' : 1,
	                 'width' : imgWidth,
	                 'marginRight' : '.5em',
	                 'marginLeft' : '.5em'
	            });
	}
	)

Мы выводим все элементы, которые имеют такое же значение атрибута rel, что и выбранный элемент навигации. Используется анимация для отображения процесса изменения ширины изображения, установки его непрозрачности на 100% и правого и левого полей на 0.5em. Для предотвращения очереди анимаций мы используем функцию stop() перед использованием функции animate().

Для скрытия элементов используется такая же техника, но итоговые значения, которые устанавливаются в ходе анимации, все равны 0.

Мы уже создали эффект трансформации списка изображений. Остается только навести лоск. Для выделения изображения в списке мы будем использовать изменение прозрачности. Изначально изображения будут иметь прозрачность 50%, а при наведении курсора мыши на элемент, изображение будет становиться полностью непрозрачным. Для получения такого эффекта будем использовать обработчик события hover для изображений.

 

$('.item li img').animate({'opacity' : 0.5}).hover(function() {
	    $(this).animate({'opacity' : 1});
	}, function() {
	    $(this).animate({'opacity' : 0.5});
	});

Готово!

Источник урока: www.webstuffshare.com/2010/05/filter-image-view-using-jquery/

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

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


Copyright© 2009 Hosted by Zhost