Добавить отдельную кнопку паузы воспроизведения во Flexslider

Я пытаюсь добавить кнопку воспроизведения в свою презентацию flexslider. Вместо стандартной кнопки playpause (внутри презентации) хотелось бы добавить отдельную кнопку где-нибудь еще на html-странице.

К сожалению, я не эксперт в javascript. Кажется, я не могу понять, как заставить элемент (скажем, изображение) где-то еще на моей странице вести себя как кнопка воспроизведения-паузы. Как подключить его к нужному скрипту?

А если это просто слишком сложно, подойдет и простая кнопка воспроизведения... поскольку презентация автоматически приостанавливается, когда посетители нажимают кнопку «Далее» или «Предыдущее».

Надеюсь, кто-нибудь может нам помочь! Спасибо


javascript playback imagebutton flexslider
person user3498299    schedule 04.04.2014    source источник
comment
Какой у вас текущий код?   -  person Whitebird    schedule 04.04.2014

Ответы (2)


arrow_upward
0
arrow_downward

Создайте одну кнопку,

<input type='button' value='START SLIDESHOW' id='play-gallery' />

Затем напишите для него js-код,

поместите код в функцию flexslide,

$('.flexslider').flexslider({
   animation: "slide",
        controlNav: false,
        pausePlay: false,
        slideshowSpeed: 4000,
        slideToStart: 0,
   start: function(slider) {
       var slideshowPlaying = true;
        $('#play-gallery').click(function() {
                    if($('ul.slides li').length > 1) {
                        if (slideshowPlaying == true) {
                            slideshowPlaying = false;
                            slider.pause();
                            $('#play-gallery').html('START SLIDESHOW');
                        } else {
                            slideshowPlaying = true;
                            slider.flexAnimate(slider.getTarget("next"));
                            slider.play();
                            $('#play-gallery').html('STOP SLIDESHOW');
                        }
                    }
                });
   }
});
person HB Kautil    schedule 07.04.2014

arrow_upward
0
arrow_downward

@HB Kautil +1 за ваш ответ. Но мне пришлось изменить всего две части вашего кода. Добавил бы это как комментарий, но моей «репутации» еще нет.

$('#play-gallery').val('START SLIDESHOW');

И

$('#play-gallery').val('STOP SLIDESHOW');

В остальном ваш ответ сделал всю тяжелую работу :)

person Jose    schedule 17.09.2014