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

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

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

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

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

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

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

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

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

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

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

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$('#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!" // текст строки помощи
  
        }
    });

Скачать

Данный плагин доступен на GitHub — https://github.com/AntonShevchuk/jquery-a-slideshow/releases

71 thoughts on “(a) Slideshow – jQuery плагин для организации слайд-шоу”

Comments are closed.