Сеточная галерея с помощью jQuery
Для начала нам необходимо загрузить скрипты и подключить их следующим образом:
После этого нам необходимо создать достаточно простую HTML разметку для данной галереи, и подключим элементы tj_prev и tj_next для навигации.
Плагин имеет параметры, которые можно подправить в зависимости от необходимости, вот некоторые из них:
rows - количество строк в сетке
navL, navR - переключение слайдов вверх и вниз
mode - тип анимации (def, fade, seqfade, updown, sequpdown, showhide, disperse, rows)
speed - скорость анимации для типов fade, seqfade, updown, sequpdown, showhide, disperse, rows
easing - эффект перехода для типов fade, seqfade, updown, sequpdown, showhide, disperse, rows
factor - задержка между последовательными анимациями для типов seqfade, sequpdown. Выражается в количестве пикселей строки
Затем вызываем плагин с параметрами (в примере кода представлены значения по умолчанию):
Вот и все, стили оформления находятся в разделе css, их можно изменить на свое усмотрения, все изображения в данном уроке были найдены в интернете и представлены исключительно в ознакомительных целях.
Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.gridnav.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script 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>
<li><a href="#"><img src="images/1.jpg" alt="image01"></a></li>
<li><a href="#"><img src="images/1.jpg" alt="image01"></a></li>
<li><a href="#"><img src="images/1.jpg" alt="image01"></a></li>
<li><a href="#"><img src="images/1.jpg" alt="image01"></a></li>
</ul>
</div>
</div>
<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>
<li><a href="#"><img src="images/1.jpg" alt="image01"></a></li>
<li><a href="#"><img src="images/1.jpg" alt="image01"></a></li>
<li><a href="#"><img src="images/1.jpg" alt="image01"></a></li>
<li><a href="#"><img src="images/1.jpg" alt="image01"></a></li>
</ul>
</div>
</div>
Плагин имеет параметры, которые можно подправить в зависимости от необходимости, вот некоторые из них:
rows - количество строк в сетке
navL, navR - переключение слайдов вверх и вниз
mode - тип анимации (def, fade, seqfade, updown, sequpdown, showhide, disperse, rows)
speed - скорость анимации для типов fade, seqfade, updown, sequpdown, showhide, disperse, rows
easing - эффект перехода для типов fade, seqfade, updown, sequpdown, showhide, disperse, rows
factor - задержка между последовательными анимациями для типов seqfade, sequpdown. Выражается в количестве пикселей строки
Затем вызываем плагин с параметрами (в примере кода представлены значения по умолчанию):
Код
<script>$('#tj_container').gridnav({
rows : 2,
navL : '#tj_prev',
navR : '#tj_next',
type : {
mode : 'def',
speed : 500,
easing : 'jswing',
factor : 50,
reverse : false
}
});</script>
rows : 2,
navL : '#tj_prev',
navR : '#tj_next',
type : {
mode : 'def',
speed : 500,
easing : 'jswing',
factor : 50,
reverse : false
}
});</script>
Вот и все, стили оформления находятся в разделе css, их можно изменить на свое усмотрения, все изображения в данном уроке были найдены в интернете и представлены исключительно в ознакомительных целях.
-
FalleN -
1376 -
1 -
243
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...