Автор

23 04.2013
Универсальная галерея для сайта на jQuery

Универсальная галерея для сайта на jQuery


 

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

 

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

 

Для создания данной галереи мы будем использовать плагин jQuery Touchwipe. Но для начала начнем с более простого, мы рассмотрим построение скелета нашей галереи, а именно разметки HTML. В коде HTML мы будем использовать основной контейнер с классом “rg-gallery”. Также он будет иметь одинаковый с классом идентификатор.

<div id="rg-gallery" class="rg-gallery">
 <div class="rg-thumbs">
 <!-- Карусель Elastislide для миниатюр -->
 <div class="es-carousel-wrapper">
 <div class="es-nav">
 <span class="es-nav-prev">Предыдущий</span>
 <span class="es-nav-next">Следующий</span>
 </div>
 <div class="es-carousel">
 <ul>
 <li>
 <a href="#">
 <img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="Здесь описание" />
 </a>
 </li>
 <li>...</li>
 </ul>
 </div>
 </div>
 <!-- Карусель Elastislide для миниатюр -->
 </div><!-- rg-thumbs -->
</div><!-- rg-gallery -->


В другом элементе div с классом “rg-thumbs” будет размещаться структура для карусели Elastislide. Миниатюры будут иметь два атрибута data, которые будут использоваться позже в нашем коде JavaScript. Атрибут “data-large” содержит путь к большому изображению, а атрибут “data-description” содержит подпись, которая будет выводиться под текущим большим изображением.

Для структуры области просмотра больших изображений используется шаблон jQuery, который добавляется в заголовке нашего документа:

<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
 <div class="rg-image-wrapper">
 {{if itemsCount > 1}}
 <div class="rg-image-nav">
 <a href="#" class="rg-image-nav-prev">Предыдущее изображение</a>
 <a href="#" class="rg-image-nav-next">Следующее изображение</a>
 </div>
 {{/if}}
 <div class="rg-image"></div>
 <div class="rg-loading"></div>
 <div class="rg-caption-wrapper">
 <div class="rg-caption" style="display:none;">
 <p></p>
 </div>
 </div>
 </div>
</script>

Мы добавляем условие, что навигация будет выводится только в случае наличия более одного изображения. Контейнер “rg-image” будет использоваться для добавления большого изображения. Теперь рассмотрим стилизацию CSS.

Элемент  “rg-image-wrapper”, который используется в шаблоне jQuery, будет иметь относительное позиционирование и полупрозрачное повторяющееся изображение в качестве фона. Рамка будет иметь скругленные углы и минимально допустимую высоту 20 px:

rg-image-wrapper{
   position:relative;
   padding:20px 30px;
   background:transparent url(../images/black.png) repeat top left;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   min-height:20px;
}

Контейнер, который используется для добавления большого изображения будет иметь относительное позиционирование и высоту строки 0. Добавим для него выравнивание текста по центру мы заставим все строчные элементы выравниваться по центру. Но так как мы не используем для изображения “display:block”, нужно установить высоту строки равной 0. Таким образом, не будет зазора  над изображением, так ка оно является строчным элементом по умолчанию:

rg-image{
   position:relative;
   text-align:center;
   line-height:0px;
}

С помощью задания свойству большого изображения max-width значения 100%, мы добиваемся, чтобы оно всегда оставалось окруженным плавающим контейнером. Мы не нуждаемся в данном свойстве, но если вы хотите ограничить размер области предварительного просмотра, то вам придется устанавливать фиксированную высоту для класса “rg-image” и изображение будет заполнять его при изменении ширины области просмотра.

rg-image img{
   max-height:100%;
   max-width:100%;
}

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

.rg-image-nav a{
    position:absolute;
    top:0px;
    left:0px;
    background:#000 url(../images/nav.png) no-repeat -20% 50%;
    width:28px;
    height:100%;
    text-indent:-9000px;
    cursor:pointer;
    opacity:0.3;
    outline:none;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
}

Это стиль для левой стрелки, теперь посмотрим на свойства для правой стрелки:

rg-image-nav a.rg-image-nav-next{
   right:0px;
   left:auto;
   background-position:115% 50%;
   -moz-border-radius: 0px 10px 10px 0px;
   -webkit-border-radius: 0px 10px 10px 0px;
   border-radius: 0px 10px 10px 0px;
}

Так как мы уже определили значение свойства left для элементов в целом, его придется установить в значение auto для правой стрелки. При наведении курсора мыши стрелки будут становиться более четкими:

.rg-image-nav a:hover{
    opacity:0.8;
}

Подписи будут иметь следующие стили:

.rg-caption {
    text-align:center;
    margin-top:15px;
    position:relative;
}
.rg-caption p{
    font-size:11px;
    letter-spacing:2px;
    font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
    line-height:16px;
    padding:0 15px;
    text-transform:uppercase;
}

Для переключателя установим следующие стили:

.rg-view{
    height:30px;
}
.rg-view a{
    display:block;
    float:right;
    width:16px;
    height:16px;
    margin-right:3px;
    background:#464646 url(../images/views.png) no-repeat top left;
    border:3px solid #464646;
    opacity:0.8;
}
.rg-view a:hover{
    opacity:1.0;
}
.rg-view a.rg-view-full{
    background-position:0px 0px;
}
.rg-view a.rg-view-selected{
    background-color:#6f6f6f;
    border-color:#6f6f6f;
}
.rg-view a.rg-view-thumbs{
    background-position:0px -16px;
}

Индикатор загрузки будет появляться в центре изображения:

.rg-loading{
    width:46px;
    height:46px;
    position:absolute;
    top:50%;
    left:50%;
    background:#000 url(../images/ajax-loader.gif) no-repeat center center;
    margin:-23px 0px 0px -23px;
    z-index:100;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity:0.7;
}

Основная идея галереи заключается в ее гибкости. Частично задача решена с с помощью стилей: большое изображение подгоняется под контейнер. Для получения адаптивной карусели миниатюр мы используем плагин Elastislide. Определим некоторые переменные:

// Контейнер галереи
var $rgGallery			= $('#rg-gallery'),
// Контейнер карусели
$esCarousel			= $rgGallery.find('div.es-carousel-wrapper'),
// Пункт карусели
$items				= $esCarousel.find('ul > li'),
// Общее количество пунктов
itemsCount			= $items.length;

Затем функцию галереи:

Gallery = (function() {
    //Функция галереи
})();

Gallery.init();

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

// Индекс текущего пункта
var current			= 0,
// Режим : карусель || во весь экран
mode 			= 'carousel',
// Проверка, если одно изображение загружено
anim			= false,
init			= function() {

	// (Не обязательно) предварительная загрузка изображений здесьы...
	$items.add('</pre>
<img src="images/ajax-loader.gif" alt="" /><img src="images/black.png" alt="" />
<pre>').imagesLoaded( function() {
		// Добавляем опции
		_addViewModes();

		// Добавляем обертку большого изображения
		_addImageWrapper();

		// Выводим первое изображение
		_showImage( $items.eq( current ) );
	});

	// Инициализуем карусель
	_initCarousel();

},

Вызываем плагин Elastislide:

_initCarousel= function() {

	// Используем плагин elastislide:
	$esCarousel.show().elastislide({
		imageW 	: 65,
		onClick	: function( $item ) {
			if( anim ) return false;
			anim	= true;
			// По нажатию клавиши мыши выводим изображение
			_showImage($item);
			// Меняем текущее
			current	= $item.index();
		}
	});

	// Устанавливаем текущее для elastislide
	$esCarousel.elastislide( 'setCurrent', current );

},

Следующая функция выводит переключатели режимов просмотра и управляет ими:

_addViewModes= function() {

	// Кнопки вверху справа: скрыть / показать карусель

	var $viewfull	= $(''),
		$viewthumbs	= $('');

$rgGallery.prepend( $('</pre>
<div></div>
<pre>').append( $viewfull ).append( $viewthumbs ) );

	$viewfull.bind('click.rgGallery', function( event ) {
		$esCarousel.elastislide( 'destroy' ).hide();
		$viewfull.addClass('rg-view-selected');
		$viewthumbs.removeClass('rg-view-selected');
		mode	= 'fullview';
		return false;
	});

	$viewthumbs.bind('click.rgGallery', function( event ) {
		_initCarousel();
		$viewthumbs.addClass('rg-view-selected');
		$viewfull.removeClass('rg-view-selected');
		mode	= 'carousel';
		return false;
	});

},

Функция  _addImageWrapper добавляет структуру для большого изображения и кнопки навигации, если общее количество изображений больше, чем одно.

_addImageWrapper= function() {

	// Добавляем структуру для больших изображений и кнопок навигации (если общее количество пунктов  > 1)

	$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );

	if( itemsCount > 1 ) {
		// Добавляем навигацию
		var $navPrev		= $rgGallery.find('a.rg-image-nav-prev'),
			$navNext		= $rgGallery.find('a.rg-image-nav-next'),
			$imgWrapper		= $rgGallery.find('div.rg-image');

		$navPrev.bind('click.rgGallery', function( event ) {
			_navigate( 'left' );
			return false;
		});

		$navNext.bind('click.rgGallery', function( event ) {
			_navigate( 'right' );
			return false;
		});

		// Добавляем событие touchwipe для обертки большого изображения
		$imgWrapper.touchwipe({
			wipeLeft			: function() {
				_navigate( 'right' );
			},
			wipeRight			: function() {
				_navigate( 'left' );
			},
			preventDefaultEvents: false
		});

		$(document).bind('keyup.rgGallery', function( event ) {
			if (event.keyCode == 39)
				_navigate( 'right' );
			else if (event.keyCode == 37)
				_navigate( 'left' );
		});

	}

},

Также инициализируются события навигации. Используя плагин jQuery Touchwipe, мы добавляем поддержку навигации с помощью сенсорного экрана и клавиатуры. Навигация по большим изображениям контролируется следующей функцией:

_navigate		= function( dir ) {

	// Навигация по большим изображениям

	if( anim ) return false;
	anim	= true;

	if( dir === 'right' ) {
		if( current + 1 >= itemsCount )
			current = 0;
		else
			++current;
	}
	else if( dir === 'left' ) {
		if( current - 1 < 0 )
			current = itemsCount - 1;
		else
			--current;
	}

	_showImage( $items.eq( current ) );

},

Функция _showImage добавляет большое изображение и его название:

_showImage= function( $item ) {

		// Выводим большое изображение, которое ассоциировано с $item

		var $loader	= $rgGallery.find('div.rg-loading').show();

		$items.removeClass('selected');
		$item.addClass('selected');

		var $thumb		= $item.find('img'),
			largesrc	= $thumb.data('large'),
			title		= $thumb.data('description');

		$('</pre>
<img alt="" />
<pre>').load( function() {

			$rgGallery.find('div.rg-image').empty().append('</pre>
<img src="' + largesrc + '" alt="" />
<pre>');

			if( title )
				$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );

			$loader.hide();

			if( mode === 'carousel' ) {
				$esCarousel.elastislide( 'reload' );
				$esCarousel.elastislide( 'setCurrent', current );
			}

			anim	= false;

		}).attr( 'src', largesrc );

	};

return { init : init };

 

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


vk.com/club.ssdru

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


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

19 04.2013
Универсальная галерея для сайта на jQuery

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


28 11.2014
Универсальная галерея для сайта на jQuery

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


16 04.2013
Универсальная галерея для сайта на jQuery

Хочу в данной статье немного расказать о создании нового сайта Image Club «PLATINUM» г.Саратов. Чтобы описать чем занимается Image Club, я приведу высказывания владелицы клуба Татьяны Бычковой:

«Почему «имидж клуб»? В основном, смена имиджа ассоциируется с началом новой жизни. Но поменять одну модную вещь на другую это не значит, что вы поменяли свой имидж. Начинать нужно со своего внутреннего мира, со своего взгляда на окружающий мир, работать не только над дефектами своей фигуры, и учиться правильно одеваться, но и получать от этого огромное достойное Вас (платиновое) удовольствие.»


14 05.2017
Универсальная галерея для сайта на jQuery

Полностраничное меню, которое заменяет текущий контент, вытесняя его с экрана.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close