Зважився потренуватися в написанні jQuery плагінів, і ось пропоную на суд громадськості мій перший плагін…

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

Для початку нам знадобиться контент для нашого слайд-шоу. Нам підійдуть будь-які теги

, ,
тощо:

Some text… on one slide


TitleSome text… on four slide

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

Ініціалізація:

//

Який же буде результат ви можете подивитися на домашній сторінці проекту 😉

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

В якості заголовків слайдів береться атрибут “alt” для картинок, або перший тег “label” для інших слайдів…

Плагін має ряд налаштувань:

$(‘#CustmSlideshow’).slideshow({
width:320, // ширина в пікселях
height:240, // ширина в пікселях
index:0, // почати зі слайда номер N
content :{
‘nextclick’:false, // перемикатися на наступний слайд по кліку на головне вікно
‘playclick’:false, // вмикати/вимикати програвання слайд-шоу по кліку на головне вікно
‘playframe’:true, // відображати спочатку слайд “Play Now!”
‘imgresize’:false, // змінювати розмір картинок під розмір слайд-шоу
‘imgcenter’:true // вирівнювати зображення по центру (поки не працює)
},
controls :{ // елементи управління
‘hide’:true, // спливаючий тулбар
‘first’:true, // кнопка перший слайд
‘prev’:true, // кнопка попередній слайд (якщо це перший, йдемо на останній слайд)
‘play’:true, // запуск слайд-шоу
‘next’:true, // кнопка наступний слайд (якщо це останній, йдемо на перший слайд)
‘last’:true, // кнопка останній слайд
‘help’:true, // кнопка відображення рядка допомоги
‘counter’:true // відображення номера поточного слайда
},
slideshow :{
‘time’:3000, // затримка між зміною слайдів
‘title’:true, // відображати заголовок чи ні
‘panel’:true, // відображати панель управління чи ні
‘help’:”Hello World!” // текст рядка допомоги
}
});

Завантажити

Завантажити даний плагін можна використовуючи або доступ до 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