Автор

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

Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.


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

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


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

В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!


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

Наверное каждому разработчику попадался заказ по созданию и организации портфолио. Лично мне весьма нравятся такие заказы, ведь заказчик хочет чего-то оригинального, и тут необходима фантазия и проявления творческой сноровки.  Не знаю как вам, но мне не хочется делать одинаковые шаблоны всем заказчикам. Надо делать дизайн, друзья мои, такой, чтобы вам не было за него стыдно. Ведь если ваше творение, в данном случае, к примеру, портфолио, поразит заказчика, то он вас наверняка порекомендует своим знакомым. А вам это только на пользу.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close