Адаптивная галерея изображений

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

Мы будем использовать плагин jQuery Touchwipe, так что навигация может осуществляться с помощью характерных манипуляций с экраном на iPhone и iPad.

Разметка HTML

В коде HTML мы будем использовать основной контейнер с классом “rg-gallery”. Также он будет иметь одинаковый с классом идентификатор. В другом элементе div с классом “rg-thumbs” будет размещаться структура для карусели Elastislide:

<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 -->

Миниатюры будут иметь два атрибута 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

Кроме настройки нескольких параметров (например, поля и отступы для миниатюр в карусели Elastislide) нужно задать стили для остальных элементов галереи..

Элемент  “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;
}

 

JavaScript

Основная идея галереи заключается в ее гибкости. Частично задача решена с с помощью стилей: большое изображение подгоняется под контейнер. Для получения адаптивной карусели миниатюр мы используем плагин 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('<img src="/images/ajax-loader.gif"/><img src="/images/black.png"/>').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	= $('<a href="#" class="rg-view-full"></a>'),
					$viewthumbs	= $('<a href="#" class="rg-view-thumbs rg-view-selected"></a>');
				
				$rgGallery.prepend( $('<div class="rg-view"/>').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 добавляет структуру для большого изображения и кнопки навигации, если общее количество изображений больше, чем одно. Также инициализируются события навигации. Используя плагин jQuery Touchwipe, мы добавляем поддержку навигации с помощью сенсорного экрана и клавиатуры:

			_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' );	
					});
					
				}
				
			},

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

			_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');
				
				$('<img/>').load( function() {
					
					$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
					
					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 };

 

Готово!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/KWWzk9apnAo/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Адаптивная галерея изображений | | 2012-06-19 12:02:28 | | Статьи Web-мастеру | | В данном уроке мы разберемся, как создать адаптивную галерею изображений с каруселью миниатюр. Галерея будет подстраиваться под размер окна просмотра, также можно будет отключить или включить | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: