Как применить салфетки в AnythingSlider - PullRequest
Новая
       11

Как применить салфетки в AnythingSlider

0 голосов
/ 14 ноября 2011

Я использую поддержку смахивания , упомянутую в официальной документации , но она не работает со встроенными видео на YouTube.

1 Ответ

0 голосов
/ 14 ноября 2011

Проблема в том, что видео на YouTube представляют собой iframes с HTML5 и встроенным видео внутри.Таким образом, пролистывание видео не регистрируется с контентом за пределами iframe.Самым простым решением было бы поместить наложение поверх видео и сделать так, чтобы оно покрывало только видео.Проблема в том, что вы не можете нажать на само видео, чтобы оно воспроизводилось, вы должны использовать элементы управления.

В это обновленное демо , наложение охватывает видео иоставляет элементы управления видимыми (добавьте background: #f00; к css-оверлею, чтобы увидеть его).Элементы управления имеют высоту 40 пикселей, поэтому вы увидите, что высота наложения учитывает это.

Вот CSS (ползунок размером 300 x 200 для этой демонстрации): 

.swipe-overlay {
    position: absolute;
    width: 300px;
    height: 160px;
    top: 0;
    left: 0;
}

и это обновленный код инициализации: 

$('#slider').anythingSlider({

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {

        var time = 1000, // allow movement if < 1000 ms (1 sec)
            range = 50,  // swipe movement of 50 pixels triggers the slider
            x = 0, t = 0, touch = "ontouchend" in document,
            st = (touch) ? 'touchstart' : 'mousedown',
            mv = (touch) ? 'touchmove' : 'mousemove',
            en = (touch) ? 'touchend' : 'mouseup';

        $('<div class="swipe-overlay"></div>')
            .appendTo(slider.$window)
            .bind(st, function(e){
                // prevent image drag (Firefox)
                e.preventDefault();
                t = (new Date()).getTime();
                x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
            })
            .bind(en, function(e){
                t = 0; x = 0;
            })
            .bind(mv, function(e){
                e.preventDefault();
                var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                r = (x === 0) ? 0 : Math.abs(newx - x),
                // allow if movement < 1 sec
                ct = (new Date()).getTime();
                if (t !== 0 && ct - t < time && r > range) {
                    if (newx < x) { slider.goForward(); }
                    if (newx > x) { slider.goBack(); }
                    t = 0; x = 0;
                }
            });
    }

});
...