Добавете отделен бутон за възпроизвеждане на пауза във Flexslider

Опитвам се да добавя бутон за възпроизвеждане на пауза към моята презентация на flexslider. Вместо стандартния бутон за възпроизвеждане на пауза (вътре в презентацията), бих искал да добавя отделен бутон някъде другаде на 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