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