(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 плагин для организации слайд-шоу”

  1. This is a great plugin, I would also like to know how to make it autoplay.

  2. I solved the autoplay function.

    Where it says Play slideshow button, just add the following:

    1
    2
    3
    this.find('a.play').ready(function() {
         _self.play();
    });

    It worked for me. :)

  3. Здравствуйте. Интересный плагин. Было бы неплохо если бы Вы сделали возможность смены фото и по щелчку, но совсем без времени, что-то наподобе autoplaying: true. Т.е. пока не щелкаеш – не меняется картинка.

    Спасибо.

  4. @Snowcore:
    В той же доке есть следующее решение:

    1
    2
    3
    (function($) {
      // plugin code here, use $ as much as you like
    })(jQuery);

    Собственно именно оно и используется…

  5. Доброго времени суток.
    Хотелось бы поблагодарить за замечательный плагин и задать пару вопросов.

    1
    2
    3
    $(document).ready(function(){
       $('#MySlideshow').slideshow();
    });

    Например при инициализации без настроек слайдшоу нормально отображается во всех браузерах, но стоит мне добавить свои настройки, например

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $(document).ready(function(){
     $('#slides').slideshow({
     title:false,
     playframe:false,
     panel:false,
     time:3000,
     }
     ).playSlide();
     });

    , то в ie6 (возможно и в 7, не проверял просто)отображаются обычные ссылки. Можно ли побороть данный эффект достигнув кроссбраузерности?

    1. У Вас возникает JS ошбика – уберите последнюю запятую

      1
      2
      3
      4
      5
      6
      $('#slides').slideshow({
      title:false,
      playframe:false,
      panel:false,
      time:3000, // вот эту...
      }).playSlide();
  6. Огромное спасибо за подсказку, просто в яваскрипте не силен…)

  7. Антон, судя по коду, картинки у вас подгружаются сразу, а как можно сделать так, чтобы сперва загружалась первая картинка. Пока посетитель любуется ею, подгружалась следующая и т.д.
    Есть ли для картинок событие onLoad?

  8. Замечательный плагин. Спасибо.

    Подскажите как изменить прозрачность тоолбара?

  9. Антон скажи, а как сделать чтобы информация (которая в alt=”” записана) всегда отображалась, а не только когда мышь наводим…

    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    //<![CDATA[
    $(document).ready(function(){   
        $('#CustomSlideshow').slideshow({
            width:320,      // width in px
            height:240,     // height in px
            index:0,        // start from frame number N
            time:3000,      // time out beetwen slides
            title:true,     // show title
            panel:true,     // show controls panel
            play:false,     // play slideshow
            loop:true,      // looping
            effect:'scrollLeft'// aviable fade, scrollUp/Down/Left/Right, zoom, zoomFade, growX, growY
            effecttime:500,// aviable fast,slow,normal and any valid fx speed value
            filter:true,    // remove <br/>, empty <div>, <p> and other stuff
            nextclick:true,      // bind content click next slide
            playclick:false,      // bind content click play/stop
            playhover:false,      // bind content hover play/stop
            playhoverr:false,     // bind content hover stop/play (reverse of playhover)
            playframe:false,       // show frame "Play Now!"
            fullscreen:false,     // in full window size
            imgresize:false,      // resize image to slideshow window
            imgcenter:true,       // set image to center // TODO
            imgajax:true,         // load images from links
            linkajax:false,       // load html from links
      
            controls :{         // show/hide controls elements
                'hide':false,    // show controls bar on mouse hover  
                'first':true,   // goto first frame
                'prev':true,    // goto previouse frame (if it first go to last)
                'play':true,    // play slideshow
                'next':true,    // goto next frame (if it last go to first)
                'last':true,    // goto last frame
                'help':false,    // show help message
                'counter':true  // show slide counter
            }
        });
    });
    //]]>
    1. Ой, забыл обновить документацию – появился новый параметр:

      1
      titleshow:false,// always show title
  10. ещё почимуто не работает scrollRight точнее работает но также как и scrollLeft ( в ту же сторону)

  11. Антон, спасибо — классный плагин.
    В настройки еще можно добавить скорость непосредственно затухания картинок.

  12. Упс, прошу прощенья, оказывается уже есть такая настройка.

    А что делает вот этот параметр:
    imgajax:true, // load images from links

    1. Если у тебя в списке тегов есть A c HREF указывающим на картинку – то она будет подгружена автоматически как еще один слайд…

  13. Так она и так подружается. Без этого параметра.
    А как можно сделать смену после подгрузки. Т.е. чтобы картинка не менялась, пока следующая не загрузится?

  14. ты хочешь чтобы человечег с хорошим интернет каналом вообще фоток не увидел?? то есть увидел но на нереально скорости смены кадров ??)

  15. KruGoZor, каналы у всех разные, вес фоток тоже.

    Для реализации надо два флага. Первый — истечение задержки time, второй — загрузка следующей картинки.
    Как только оба = true, меняем картинку.

  16. Еще можно предложить параметр для задания задержки перед Первой сменой кадров. То есть получается задержка или ускорение старта.

  17. Здравствуйте. Спасибо большое за вашу статью. очень полезно при изучении jquery. Но у меня появилась с этим проблема, которую не получается решить. Буду очень признательна за помощь.
    Итак, у меня есть и отображается окошко для слайд-шоу (div id=’SlideShow’), а также 2е кнопки для промотки послайдово. Авто не требуется. Проблема в событиях этих кнопок. скрипт зависает и отображает белое окошко а в количествах слайдов пишет цифру, превышающую мною подгруженное! :(

    1
    2
    3
    4
    5
    6
    <div id="SlideShow">
    <a href='photo/8_part_ru_vidi_1.jpg' title="the first"></a>
    <a href='photo/8_part_ru_vidi_2.jpg' title="the second"></a>
    <a href='photo/8_part_ru_vidi_3.jpg' title="the third"></a>
    <a href='photo/8_part_ru_vidi_4.jpg' title="the forth"></a>
    </div>
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    $(document).ready(function(){
    $('#SlideShow').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false});
        $('#but_l1').click(function(){
    $('#SlideShow').slideshow({width:230,height:150,imgresize:true,playframe:false}).prevSlide();
        });
        $('#but_r1').click(function(){
    $('#SlideShow').slideshow({width:230,height:150,imgresize:true,playframe:false}).nextSlide();
        });
    $('#image_alt').text()=$('#SlideShow').slideshow({titleshow:true});
    });
    1. А если попробывать вот таким способом:

      01
      02
      03
      04
      05
      06
      07
      08
      09
      10
      11
      12
      $(document).ready(function(){
      var slide = $('#SlideShow').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false});
       
      $('#but_l1').click(function(){
          slide.prevSlide();
      });
       
      $('#but_r1').click(function(){
          slide.nextSlide();
      });
       
      });

      В Вашем примере вы просто несколько раз инициализируете слайдшоу…

  18. Ой, Спасибо большое! Работает! :)
    Неск.раз? возможно. но чего я только не пробовала. теперь буду знать. спасибо.
    Еще вопрос: что не так в 9-ой строчке скрипта? мне нужно коммент(title,alt)текущего слайда отображать. но блок для его отображения (p id=image_alt) находится после контейнера для слайдшоу. Как правильно это значение присвоить содержимому ,напр.?

  19. теги не отображаются здесь без контейнера для кода? извините..
    я имела в виду селектор р.

    1. Вопрос понял, только на данный момент получить тайтл текущего слайда не получится нормальным путем, воспользуйтесь следйющим кодом:

      1
      $('#SlideShow').find('.slideshow-label').html();
      1. Как я должна использовать этот код? Результата нет ни при загрузке страницы, ни при нажатии кнопки..

        01
        02
        03
        04
        05
        06
        07
        08
        09
        10
        11
        12
        $(document).ready(function(){
            var slide = $('#SlideShow').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false});
            var slide2 = $('#SlideShow2').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false});
            $('#SlideShow2').hide();
            $('#image_alt').text=$('div').find('.slideshow-label').html();
            $('#but_l1').click(function(){
            $('#SlideShow2').hide();
            $('#SlideShow').show();
            slide.prevSlide();
            $('#image_alt').text=$('#SlideShow').find('.slideshow-label').html();
            });
        ...
  20. Не получается динамично выводить тайтл. Выводит только 1раз – в самом начале работы с контейнером,т.е. при загрузке страницы и при смене видимого контейнера. при смене же самих сладов внутри одного контейнера выводимый текст не меняется.

    1
    2
    3
    //  var title =$('div').find('.slideshow-label').html();
    //  $('#image_alt').text(title);
        $('#image_alt').text($('#SlideShow').find('.slideshow-label').html());

    В обоих случаях результаты одинаковые. Может я что-то делаю не так?

  21. Еще раз здравствуйте! :)
    Тайтл наконец-то отображается. :) но имеет при этом интересную особенность: происходит отображение тайтла предыдущего слайда!О_о

      1. нет не использую… у меня есть кнопки для прокрутки назад/вперед, поэтому поиск тайтл находится в обработчике click..
        ну а если брать change, то применительно к какому элементу? слайдшоу?-не действует..

        01
        02
        03
        04
        05
        06
        07
        08
        09
        10
        11
        12
        13
        14
        15
        var slide = $('#SlideShow').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false});
             
        $('#image_alt').text($('#SlideShow').find('.slideshow-label').html());
             
        slide.change(function()
        {$('#image_alt').text($('#SlideShow').find('.slideshow-label').html());} //не отображает тайтл
            );
             
        $('#but_l1').click(function()
            {
            $('#SlideShow2').hide();
            $('#SlideShow').show();
                slide.prevSlide();
              //$('#image_alt').text($('#SlideShow').find('.slideshow-label').html());  отображает тайтл но не текущего а предыдущего слайда
            });
  22. hi all, I wanted to report you a small bug on this plug-in.
    if you use the external buttons to control the slide with the functions my_slide.next() or my_slide.prev() these work fine with IE OR Chrome, but whit firefox don’t work. for this browser you must use the follow syntax.

    1
    2
    $('#my_slide')[0].prev();
    $('#my_slide')[0].next();

    bye
    Leo

  23. Пожалуйста, подскажите как корректно выводить тайтл отображаемого слайда слайд-шоу?

  24. Добрый день
    Первый показывает кадры с паузой в 5 секунд, а повторно происходит
    показываем первый кард, сразу же второй, пауза 5 секунд

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    $(document).ready(function(){
    $('#slideshow').slideshow({
     width:465, height:200,
     time:5000,
     play:true,
     playframe:false,
     effect:'scrollLeft',
    controls :{
      'hide':true,
      'help':false,
    }
     });
    });
  25. у меня очень жесткая проблема , хотел вставить слайд шоу себе на сайт. но столкнулся с проблемой, дело в том что у меня не получается его вставить дажен а пустойй лист. В чем проблема посмотрите пожалуйста, я совсем только начинаю и плохо разбераюсь во всех тонкостях, присылаю вам код укажите ошибки если вас не затруднит, заранее спасибо за понимание
    ВОТ СОБСТВЕННО САМ КОД

    1. Если хотите запаблишить код – используйте соответствующие кнопки на QuickBare

  26. все решил пользовать для этих целей jquery innerfade гораздо проще и эффект который и нужен, простая смена изображений

  27. Здравствуйте, Прошу Вас помочь разобраться.
    Установил код на сайт. На главной странице и страницах со вторым уровнем вложения отображается все хорошо, а вот с третьего уровня нет. Картинка сначала дублируется вниз, потом встает на место.
    Например посмотрите тут: http://www.absolutnoe100fm.ru/project/mechta/

    1. На данной странице у меня совсем все плохо смотрится, точнее картинки не подгружаются по ссылкам, т.к. ссылка на них имеет вид image.jpg?UID=1234567890 – мой скрипт не обрабатывает правильно данные ссылки, в следующей версии я постараюсь это исправить…

      Возможно так же есть проблемы совместимости с другими скриптами на странице – попробуйте их отключить…

  28. Столкнулся с проблемой следующего характера:

    Внутри слайдера у меня HTML в свободной форме. Сгруппированный диваками. Так вот у меня внутри этих диваков, ссылки не работают. В чем может быть причина?

    1. Необходимо выставить в настройках:

      1
      2
      3
      4
      {
         playclick:false,
         nextclick:false
      }

      Чтобы не было перехвата событий.

  29. Антон, в том то и дело, что не работало… Пробовал неоднократно…
    Пришлось в ссылках onClick=”javascript: window.location = ‘my_url’;” использовать…

  30. И еще, есть ли возможность отключить изменения hash?
    А то пришлось руками в коде это отрубать…

  31. Антон, доброго времени суток! Очень понравился ваш плагин, но к сожалению возникли некоторые проблемы. Если вкратце – когда на страничке используются сразу несколько окошек плагина, в которых .htm содержимое – то он работает очень криво, грузит одно окошко, остальные глючат. Хотя если использовать просто .jpg то всё работает очень хорошо, или если поставить на страничку только один плагин с .htm содержимым, то опять же всё работает!
    К тому же в IE даже одно окошко с .htm содержимым не отображается совсем.
    Пробовал вместо .htm использовать .html, или .php разницы никакой.

    Вот то о чём собстна реч.
    http://fiestakids.ru/ts.php

  32. Добрый день, Антон!
    В Opera 10.Х не листаются слайды из демо-примера…

      1. Здравствуйте Антон!
        К сожалению до сих пор никак не могу побороть проблему с отображением html содержимого, пожалуйста отпишитесь есть ли возможность разобраться с этим багом? если вам для этого нужно править скрипт я со своей стороны готов оплатить потраченное на работу пиво =)
        Спасибо заранее!

  33. plugin классный. но почему-то в chrome 3.0 даже демо-примеры не работают… просто пустой div…

  34. привет Антон!,
    возникла потребность разместить на 1 странице 2 окна сладов с разными стилями css…

    Для размещение двух окон сделал так:

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){
        $('#MySlideshow').slideshow();
    });
    //]]>
    </script>
     
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){
        $('#MySlideshow2').slideshow2();
    });
    //]]>
    </script>
     
    <div id="MySlideshow">
    ...
    </div>
     
    <div id="MySlideshow2">
    ....
    </div>

    Но теперь нужно чтобы у MySlideshow был 1 css файл (именно цвет у slideshow-label-place, background-color) а у MySlideshow2 был второй css с другим background-color заголовка… как можно это реализовать?

    1. Тебе нужно сделать следующее в CSS:

      1
      2
      3
      4
      5
      6
      7
      #MySlideshow .slideshow-label-place {
          background-color:#ff0000 !important;
      }
       
      #MySlideshow2 .slideshow-label-place {
          background-color:#00ff00 !important;
      }
  35. Спасибо!
    А ширина длинна title где указывается?

    1
    2
    3
    4
    5
    6
    7
    8
    .slideshow-label-place {
        padding:0;
        position:absolute;
        top:85%;
        left:0px;
        z-index:90;
        height:30px;
    }
  36. Доброго времени суток. У меня такой вопрос. Видите ли в чем дело, я ваш слайд шоу использую не для показа картинок, а для вывода массивного текста частями в узком месте. Так вот, к примеру посетитель прочель две трети текста, и хочет сохранить ссылку где он остановился. Естественно что ссылка приведет на первый фрейм. Как сделать чтоб можно было указывать ссылку сразу же на фрейм. И могу ли я работать использовать вложенные ? Или не получится из-за того что из них берутся фреймы. Спасибо

  37. Спасибо за совет, по моему это был не правильный и очень громоздкий подход к делу. Я его уже решил.
    У меня другой вопрос, не знаю в каком топике его задать, поэтому задаю тут. Вопрос по поводу jQuery
    Я с jQuery ни разу не работал в жизни почти, до того момента как попробовал по вашему уроку сделать то слайдшой меню контента. Используя документацию на официальном сайте сделал модуль бб-кодов на сайт одной девушке для которой делаю проект…. Чет я разболтался)))
    Ну так вот, с помощью jQuery отслеживаю нажатие по определенному элементу и добавляю определенный бб-код.
    Проблема в том что он добавляется до тех пор, пока я не впишу ни какого текста в форму textarea как только я там что либо написал или изменил как сразу же все перестает работать. Могли бы вы посмотреть что же это такое, по этому адресу.
    http://swain.webuda.com/content.php?id=2&type=zapiski
    Там внизу есть форма добавить комментарий. Или могли бы вы хотя бы посоветовать в какую сторону копать то! Большое спасибо за предыдущий ответ. И каким бы ни был ответ на этот вопрос, спасибо и за него.

  38. Очень понравился плагин. Тем не менее есть потребность сделать слайдшоу в двух связанных областях.
    существунт, например, три текста и каждый текст имеет от двух до четырех иллюстраций (в принципе не в количестве дело дело в том, что их количество разное).
    Что надо получить. показываем текст 1 в области 1, в области 2 показываем слайдшоу из иллюстраций к тексту 1,
    показываем текст 2 в области 1, в области 2 показываем слайдшоу из иллюстраций к тексту 2, и так далее. Подскажите, пожалуйста, как это логичнее реализовать с помощью aSlideshow.

    1. Отвечать не нало – все сделал….

  39. Хорошая штука. Но есть одна бнопня – нет нормального ресайза большой картинки. Поковырялся, сделал по мотивам увеличения:

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    this._resize = function (el) {
        if (!this.options.imgresize && !this.options.fullscreen) return false;
     
        var nWidth  = el.get(0).width;
        var nHeight = el.get(0).height;
     
        var Kw = nWidth/this.options.width;
        var Kh = nHeight/this.options.height;
     
        var K  = (Kh > Kw) ? Kh : Kw;
     
        nWidth  = Math.floor(nWidth / K);
        nHeight = Math.floor(nHeight / K);
     
        el.css({width:nWidth,height:nHeight});
     
        return el;
    };

    Однако начала непредсказуемо глючить центровка. С первой загрузки стабильно выдаёт хрен пойми какие отступы, похоже, для исходной картинки(т.е. уменьшенная вообще правым нижним уголком виднеется). Потом, если повезёт, работает нормально. И как бы это побороть?

  40. Супер. Наткнулся на одно только препятствие. Очень нужно что бы ширина блока (для IE6), показывающегося была ‘auto’ а не чётко в пикселях.
    Сначала мне показалось, что всё работает, но сейчас оказалось – делает одну смену изображений и останавливается. В чём косяк? :(
    P.S. И ещё, не заметил где у вас описано что нового в новой версии плагина? 0.8 же недавно вышла.

Comments are closed.