Автор

Универсальная галерея для сайта на 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 };

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

И снова параллакс на jQuery, но довольно-таки интересный вариант и я думаю многие захотят на своем сайте иметь чтото подобное, так как практически это многослойный параллакс эффект, просто посмотрите демо и всё станет ясно!


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

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


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

Если вы решили использовать защищенный протокол на страницах своего сайта, вы молодец. Используя HTTPS-соединение, вы заботитесь о конфиденциальности данных своих пользователей.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close