Автор

Сеточная галерея с помощью 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

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


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

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


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

Небольшой скрипт автоматически изменит год в нижней части (футере) вашего сайта. Не нужно каждый год менять его в шаблоне сайта — обновится сам, в зависимости от настроек посетителя.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close