Автор

Слайдер миниатюр с помощью плагина jQuery

Слайдер миниатюр с помощью плагина jQuery


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

Для начала нужно создать HTML-разметку. Разметка карусели состоит из основного контейнера, который выравнивает ширину плавающего контейнера, помещаемого внутрь него.

<div id="carousel">
<div>
     <ul>
	 <li>
	     <a href="#">
			<img src="images/medium/1.jpg" alt="image01" />
				</a>
			</li>
			<li>...</li>
	</ul>
   </div>
</div>

Используйте атрибут ID и запускайте плагин:

$('#carousel').elastislide({
	imageW 	: 180
});

где imageW - ширина миниатюр.

Теперь создаем стили CSS для слайдера:

.more{
	position:relative;
	clear:both;
}
.more p{
	color:#8f0630;
	font-size:16px;
}
.more ul{
	display:block;
	text-align:center;
}
.more ul li{
	display:inline;
	padding:2px;
	line-height:30px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
	background:#690322;
	color:#fff;
	text-shadow:none;
}
.more ul li a{
	text-shadow:1px 1px 1px #fff;
	color:#333;
	background:#fff;
	padding:3px 6px;
	white-space:nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.more ul li a:hover{
	background:#8f0630;
	color:#fff;
	text-shadow:none;
}
.column{
	width:48%;
	float:left;
	padding:1%;
}
@media screen and (max-width: 640px) {
	.header{
		text-align:center;
	}
	.header a{
		font-size:10px;
		text-shadow:none;
		white-space:nowrap;
	}
	.header span.right_ab{
		float:none;
	}
	h1{
		font-size:40px;
	}
	h1 span{
		font-size:16px;
	}
}

Рассмотрим некоторые опции плагина  Elastislide:

speed		: 450,
// скорость анимации

easing		: '',
// эффект перехода

imageW		: 190,
// ширина изображений

margin		: 3,
// поле для изображений справа

border		: 2,
// рамка изображений

minItems	: 1,
// минимальное количество слайдов, которое нужно выводить.
// При изменении размера окна будет выводиться слайдов не менее
// количества, заданного в парметре minItems
// (если значение minItems меньше, чем общее количество слайдов)

current		: 0,
// номер текущего слайда.
// При изменение окна плагин всегда будет
// выводить слайды так, чтобы указанное изображение было видно.

onClick		: function() { return false; }
// Возвратная функция для события click на слайде.
// Пример получения номера слайда, на котором нажали кнопку мыши:
/*
$('#carousel').elastislide({
    onClick  :  function( $item ) {
        alert( 'кнопку мыши нажали на слайде № ' + $item.index() )
    }
});
*/

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

var $items	= $('<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li><li><a href="#"><img src="images/large/2.jpg" alt="image01" /></a></li>');
$('#carousel').append($items).elastislide( 'add', $items );

 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Слайдер миниатюр с помощью плагина jQuery

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


Слайдер миниатюр с помощью плагина jQuery

Сегодня я расскажу вам, как создавать различные CSS3  эффектов. Мы использовали javascript. В результате страницы галереи у нас будет 9 образов, каждый из которых имеет собственный hover эффект.


Слайдер миниатюр с помощью плагина jQuery

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 - основой будут css3 transitions.

Не устаю напоминать, что результаты данного урока будут работать только в современных поддерживающих CSS3 браузерах, таких как Chrome, Firefox, Safari. Идея урока состоит в том, чтобы создать необычную круглую миниатюру, которая будет анимироваться при наведении на неё курсора.


Слайдер миниатюр с помощью плагина jQuery

Кнопка вызова к действию, которая анимируется и превращается в полноразмерное модальное окно.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close