2

状況

HTML、CSS、Javascript で基本的なスライド デッキを作成しています。その jquery サイクル プラグインに基づいています。スライドは、画像、テキスト、または iframe のいずれかを含むシンプルなアイテムです (例: YouTube、または別の Web ページ、つまり、私のドメインに存在する/制御できるページではありません)。次と前のボタンが Jquery Keydown で動作していますが、これはうまく機能しています。現在、ユーザーはマウスを使用してスライドを移動する必要はありません。

問題

iframe を含む li にキースルーした場合、ユーザーが iframe をクリックすると、(予想どおり) フォーカスが iframe に移動し、次のスライドに移動するには、次のスライドに再度フォーカスするか、マウスクリックで前のボタン。ページ内のフォーカスがどこにあるかに関係なく、ページが親のキーダウン イベントをリッスンし続ける方法はありますか?

また、できれば

たとえば、スペースバーを使用して再生/一時停止できるように、そのスライドがアクティブなときにiframeを自動的にフォーカスする（および前述のように次/前を維持する）ことも含むソリューションがあれば素晴らしいでしょう。 youtube ビデオを左クリックして、次のスライドに移動します。必要がなければ、基本的にマウスを使わなくてもいいようにしたいです。

以下のキープレスコード（デッキを機能させるには、サイクルプラグインと私のコードの一部が必要です-必要に応じて提供できますが、他の方法で使用できるキーダウンイベントを一貫してリッスンするための一般的なソリューションがここにあると思いますコンテキスト)

キープレスのJquery

    $(document).ready(function () { 
        $("body").keydown(function(e) {
            if(e.keyCode == 37) { // left
                $("#prev").click();
                return false;
                }
            else if(e.keyCode == 39) { // right
                $("#next").click();
                }

        });
    });

HTML

<body>


<ul class="images">

    <!-- Basic slide example -->

    <li class="wrapper" title="test slide 01"></li>


    <!-- Example with iframe -->

    <li class="wrapper" title="test slide 02" >
    <iframe width="100%" height="100%" id="iframe" 
    src="http://www.youtube.com/embed/BlpwHBn6ikg?wmode=transparent" frameborder="0" allowfullscreen>   
    </iframe>
    </li>



</ul>

    <div id="prev">
    </div>
    <div id="next">
    </div>

私が使用しているサイクルプラグイン

http://malsup.github.io/jquery.cycle.all.js

私のオプション

$(function() {var index=0,hash=window.location.hash;if(hash){index=/\d+/.exec(hash)[0];index=(parseInt(index)||1)-1;}  
    $('.images')
    .before('<div id="nav">') 
    .cycle({
        prev:   '#prev',
        next:   '#next',
        timeout: 0,
        slideResize: 0,
        containerResize: 0,
        startingSlide:index,
        pager:  '#nav',
        before: onBefore,
        pagerAnchorBuilder: function(i, slide) {
        return '<a href="#"><p>' + $(slide).attr('title') + ' </p></a>';},
        after:function(curr,next,opts){window.location.hash=opts.currSlide+1;}
        });

        function onBefore() { 
            $('#caption') 
            .html(this.h1); 
        };

}); 

function setSlide(index) {
            $('.images').cycle(index);
        }

前と次の CSS

#prev, #next{
width: 40px;
height: 100%;
position: absolute;
bottom: 90px;
cursor: pointer;
z-index: 1100;

それが明確であることを願っています。どんな助けでも大歓迎です。すべてのソリューションがすべてのブラウザでサポートされている必要はありません。最小要件は、クロムで動作することです。

ありがとうございました！

4

0 に答える 0