2

私はいくつかのYouTubeビデオにfancyboxを使用していますが、このフィドルとまったく同じようにナビゲーションボタン(オーバーレイの横にある次のボタンと前のボタン)を使用したいと考えています。

これが私のファンシーボックスです：

$('.fancybox-media')
    .attr('rel', 'playlist')
    .fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        prevEffect: 'none',
        nextEffect: 'none',
        arrows: false,

        helpers: {
            media: {}
        },
        overlay : {
            css: { 'overflow-y': 'hidden' }
        },
        youtube : {
            autoplay: 1,
            hd: 1,
            wmode: 'opaque',    // shows X to close
            vq: 'hd720'         // default 720p hd quality
        },
        beforeShow : function(){
            $("body").css("overflow", "hidden"); // hide body scrollbar
        },
        afterClose: function(){
            $("body").css("overflow", "scroll"); // show body scrollbar
        }
    });

JFK からのこの投稿に関して、これらのスタイルを css ファイルに入れました。

.fancybox-lock {
    margin: 0 !important;
}

.fancybox-nav {
    width: 60px;       
}

.fancybox-nav span {
    visibility: visible;
}

.fancybox-next {
    right: -60px;
}

.fancybox-prev {
    left: -60px;
}

そして私のhtml：

<li class="closed">Headline
    <ul>
        <li class="fl"><a class="fancybox-media" href="http://www.youtube.com/watch?v=Dtb5Srdx7iY" rel="playlist"><img class="thumbnail" src="x.jpg"></a></li>
        <li class="fl"><a class="fancybox-media" href="http://www.youtube.com/watch?v=Dtb5Srdx7iY" rel="playlist"><img class="thumbnail" src="x.jpg"></a></li>
    </ul>
</li>

および実装されたスタイルシート:

 <!-- FancyBox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.4"></script>
<script type="text/javascript" src="fancybox/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.4" media="screen" />

これを機能させることができず、その理由がわかりません。いくつかのファイルが不足しているように感じます。

4

1 に答える 1

2

さて、 JFK（私）によるこの投稿は1年以上前のものであるため、受け入れられた回答はfancyboxの最新バージョンによって却下される可能性があるため、今では忘れてください.

必要な唯一の css は、投稿の冒頭で参照したフィドルと同じです。

.fancybox-nav {
    width: 60px;       
}

.fancybox-nav span {
    visibility: visible;
}

.fancybox-next {
    right: -60px;
}

.fancybox-prev {
    left: -60px;
}

...その後、jQuery コードはこれらの行を必要としないため、削除することができます

overlay : {
    css: { 'overflow-y': 'hidden' }
}
beforeShow : function(){
    $("body").css("overflow", "hidden"); // hide body scrollbar
},
afterClose: function(){
    $("body").css("overflow", "scroll"); // show body scrollbar
}

...それはすでにfancybox v2.1.4で処理されているため

最後に、あなたが言っI would like to have navigation buttons (next and previous buttons beside the overlay)たので、コードにこのオプションを含めることは意味がありません。

arrows: false

...そうですか？なのでこれも外します。動作中の JSFIDDLEを参照してください

于 2013-04-06T22:28:32.430 に答える