Плагин галерея на jQuery. Примеры использования
Для того чтобы плагин работал к проекту нужно подключить следующие файлы
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.xdGallery.js"></script>
<link rel="stylesheet" href="js/xdGallery/jquery.xdGallery.css" type="text/css" /
Сами items'ы подаются в произвольном виде, главное они должны быть в неком боксе
<div id="myGallery">
<img alt="xdGallery на jQuery" src="tmp/images/jquery/xdGallery/photo1.jpeg"/>
<img alt="xdGallery на jQuery" src="tmp/images/jquery/xdGallery/photo2.jpeg"/>
<img alt="xdGallery на jQuery" src="tmp/images/jquery/xdGallery/photo3.jpeg"/>
</div>
ну и непосредственно вызов плагина нужно делать в событии onDomReady
$(function(){
$('#myGallery').xdGallery({navigation:5});
});
и вертикальный вариант
$(function(){
$('#myGalleryVertical').xdGallery({horizontal:false});
});
доступные опции
Название |
Описание |
Значение по умолчанию |
shag |
px за один шаг прокрутки |
200 |
speed |
время за которое карусель прокрутится на один шаг(shag) |
200 |
itemClass |
пометка каждого item'а классом |
itemXDGalery |
easingWheel |
характер прокрутки при вращении колесиком |
swing |
easingNext |
характер прокрутки при прокрутке через next,prev |
linear |
easingDrag |
характер прокрутки при перетаскивании, эффект инерции |
linear |
invertWheel |
инвертировать прокрутку при вращении колесика мышки (1 или -1) |
1 |
invertNext |
инвертировать прокрутку при нажатии кнопок next и prev (1 или -1) |
-1 |
horizontal |
горизонтальная ориентация галереи, по умолчанию true, если false то вертикальная ориентация |
true |
onHoverNext |
прокручивать карусель при наведении на кнопку next или prev |
false |
navigation |
навигация, если false, то выключена. Если >0, то равно на сколько табов будет делиться карусель, если указать = 0, то будет автоматически подбирать под количество items |
false |