jQuery слайдшоу jqFancyTransitions

Так уж получилось, что темы последних статей посвящены исключительно WEB строительству и всему что с этим связано. Что поделать, на то он и блог, чтобы писать о том, чем занимаюсь в данный отрезок времени. И сегодня продолжу начатую тему - рассказ мой будет о замечательном jQuery плагине jqFancyTransitions. Демо можно посмотреть на сайте разработчика.

jqFancyTransitions предельно простой в установке и использовании JQuery плагин для создания эффектного слайд-шоу на вашем сайте. По заявлению разработчика, jqFancyTransitions совместим с Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+, т.е. корректно работает во всех современных браузерах.

В начале вам необходимо скачать jQuery и сам jqFancyTransitions. Подключаем их на вашей страничке следующим образом:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqFancyTransitions.js" type="text/javascript"></script>

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

<div id='slideshow'>
 <img src='img1.jpg' alt='изображение1' />
 <img src='img2.jpg' alt='изображение2' />
 <img src='img3.jpg' alt='изображение3' />
</div>

Осталось указать плагину jqFancyTransition над каким элементом следует выполнять действия. В нашем случае это #slideshow, которому для примера установим ширину и высоту. Это можно сделать с помощью следующего кода:

<script>
$('#slideshow').jqFancyTransitions({ width: 400, height: 300 });
</script>

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

effect: '', // wave, zipper, curtain ( волны, застежка, занавес)
width: 500, // ширина панели
height: 332, // высота
strips: 20, // количество полос
delay: 5000, // задержка между изображениями в ms
stripDelay: 50, // задежка между эффектами ms
titleOpacity: 0.7, // прозрачность подписи
titleSpeed: 1000, // время показа подписи ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // кнопки навигации prev и next
links: false // показ картинок как ссылок