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 // показ картинок как ссылок
Комментариев: 2
Подскажите, а есть ли возможность у этого плагина выводить дескрипшн в другом блоке?
Ну скажем в диве с указанным ID?
В description будет выводиться содержимое атрибута alt тега img.