(a)Slideshow — jQuery плагин для организации слайд-шоу

Решился потренироваться в написании jQuery плагинов, и вот предлагаю на суд общественности мой первый плагин…


Данный плагин позволяет организовать мини-презентацию из любых DOM элементов, он прост в использовании и вполне может Вам пригодиться. Ну от слов к делу.

Для начала нам понадобится контент для нашего слайд-шоу. Нам подойдут любые теги <p>, <img>, <div> и т.д:

1. <div id="MySlideshow"><!-- обертка нашего слайд-шоу -->
2.     <p>Some text... on slide one</p>
3.     <img src="img/image_0.jpg" alt="It's slide number two"/>
4.     <img src="img/image_1.jpg" alt="It's slide number three"/>
5.     <p><label>Title</label>Some text... on slide four</p>
6.     <img src="img/image_2.jpg" alt="It's slide number five"/>
7. </div>

Теперь подключим JavaScript (jquery и плагин) и файл стилей:

1. <link href="js/jquery.aslideshow/simple/styles.css" media="screen" rel="stylesheet" type="text/css" />
2. <script type="text/javascript" src="js/jquery.js?ver=1.2.6"></script>
3. <script type="text/javascript" src="js/jquery.aslideshow.js"></script>

Инициализация:

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $('#MySlideshow').slideshow();
4. });
5. </script>

Каков же будет результат вы можете посмотреть на домашней страничке проекта ;)

Конфигурация

В качестве заголовка слайдов берется атрибут «alt» для картинок, либо первый тег «label» для остальных слайдов…

Плагин так же имеет ряд настроек:

1. $('#CustmSlideshow').slideshow({
2.         width:320,      // ширина в пикселях
3.         height:240,     // ширина в пикселях
4.         index:0,         // начать со слайда номер N
5.         content :{
6.             'nextclick':false,   // переключаться на следующий слайд по клику на главное окно
7.             'playclick':false,   // включать/выключать проигрывание слайд-шоу по клику на главное окно
8.             'playframe':true,  // отображать вначале слайд "Play Now!"
9.             'imgresize':false,  // изменять размер картинок под размер слайд-шоу
10.             'imgcenter':true   // выравнивать картинки по центру (пока не работает)
11.         },
12.         controls :{         // элементы управления
13.             'hide':true,    // всплывающий тулбар
14.             'first':true,    // кнопка первый слайд
15.             'prev':true,    // кнопка предыдущий слайд (если это первый, идем на последний слайд)
16.             'play':true,    // запуск слайд-шоу
17.             'next':true,    // кнопка следующий слайд (если это последний, идем на первый слайд)
18.             'last':true,    // кнопка последний слайд
19.             'help':true,    // кнопка отображения строки помощи
20.             'counter':true  // отображение номера текущего слайда
21.         },
22.         slideshow :{
23.             'time':3000,  // задержка между сменой слайдов
24.             'title':true, // отображать заголовок или нет
25.             'panel':true, // отображать панель управления или нет
26.             'help':"Hello World!" // текст строки помощи
27.  
28.         }
29.     });

Скачать

Скачать данный плагин можно используя либо доступ к SVN'у:

svn checkout http://a-slideshow.googlecode.com/svn/trunk/ a-slideshow-read-only

Либо в архиве:

http://code.google.com/p/a-slideshow/downloads/list
http://plugins.jquery.com/project/a-slideshow