Автор

Сеточная галерея с помощью jQuery

Сеточная галерея с помощью jQuery


 

После некоторого перерыва наш блог возвращается в предыдущий ритм жизни, для того чтобы радовать своих посетителей новыми уроками. И первым уроком в данном месяце станет создание отличной сеточной галереи миниатюр с возможностью различной навигации, для этого мы будем использовать Grid Navigation. В примере мы рассмотрим сразу 10 вариантов переключения между страницами и реакции на прокручивание колесика мыши.

 

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

 

Для начала нам необходимо загрузить скрипты и подключить их следующим образом:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.gridnav.js"></script>

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

<div id="tj_container">
<div><span id="tj_prev">Дальше</span>
 <span id="tj_next">Назад</span></div>
<div>
<ul>
	<li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
</ul>
</div>
</div>

Плагин имеет параметры, которые можно подправить в зависимости от необходимости, вот некоторые из них:

Затем вызываем плагин с параметрами (в примере кода представлены значения по умолчанию):

$('#tj_container').gridnav({
	rows	: 2,
	navL	: '#tj_prev',
	navR	: '#tj_next',
	type	: {
		mode		: 'def',
		speed		: 500,
		easing		: 'jswing',
		factor		: 50,
		reverse		: false
	}
});

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


vk.com/club.ssdru

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



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

Сеточная галерея с помощью jQuery

В последнее время мы экспериментировали с анимацией SVG. Сегодняшний урок показывает вам, как анимировать сразу несколько путей SVG, чтобы создать стильный фоновый эффект для модального окна.


Сеточная галерея с помощью jQuery

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


Сеточная галерея с помощью jQuery

Эффект погружения, основанный на масках изображений и CSS-преобразованиях.


Сеточная галерея с помощью jQuery

Очень профессиональный качественный легкий плагин с валидным кодом. Предусмотрено много различных эффектов смены слайдов. Одна из предшествующих версий этого плагина уже упоминалась в моем блоге и ранее, сейчас познакомимся с более свежим решением. Последняя версия выпущена совсем недавно: 24 января 2011 года.


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close