Как стать автором
Обновить

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

Время на прочтение 4 мин
Количество просмотров 5.3K

Решился потренироваться в написании 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
Теги:
Хабы:
+35
Комментарии 31
Комментарии Комментарии 31

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн