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



jQuery 23.04.2013

 

Как вы возможно заметили, мы достаточно много уделяем внимания по созданию различных галерей для сайта, и это совсем не странно, ведь галерей достаточно много, и они весьма специфические. В данном уроке мы рассмотрим как создать адаптированную галерею с каруселью миниатюр для сайта, с помощью плагина 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 };

 

Материал взят из зарубежного источника - tympanus.net/codrops/2011/09/20/responsive-image-gallery и представлен исключительно в ознакомительных целях.

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

  1.

    Пейзажи и картины только на чистом CSS

    CSS3

  2. Aнимированное меню с помощью CSS3

    CSS3

  3. Сообщения для сайта с помощью jQuery и CSS3

    CSS3

  4. Слайдер «Adaptor»

    jQuery

Top

🔖 Выбор по тегам ×

HTML5 7 CSS3 135 jQuery 164 JS 45 SVG 11 Разное 18

💌 Написать сообщение ×

Все поля обязательны для заполнения!