4

画像とビデオの両方を表示するために Fancybox 2.0.6 を使用しています。画像/ビデオをロールオーバーすると (ギャラリーに複数の画像がある場合)、Fancybox は前後のアイコンとリンクを表示します。クリック可能な領域は、jquery.fancybox.css によると、画像/ビデオの左右の 40% を占めます。これは画像には最適ですが、ビデオの場合は再生ボタンをブロックして、ユーザーがビデオを再生または一時停止するのではなく、次/前のビデオに移動するようにします。クリック可能な領域の幅を変更したいのですが、動画の場合のみ - 画像の場合はそのままにしておきたいです。Fancybox を調査したところ、wrapCSS を使用して Fancybox の複数のインスタンスのカスタム スタイルを作成できることがわかりましたが、機能させることができません。

これが私のjs呼び出しです

<script type="text/javascript">
    $(document).ready(function() {
    $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS    : 'fancybox-nav-video'
    });
    });
</script>
<script>
$(document).ready(function() 
{
$('.fancybox').fancybox(
    {
        padding : 0,
        openEffect  : 'elastic'
    }
    );
    $(".fancybox").fancybox(
    {
        wrapCSS    : 'fancybox-nav',
        closeClick : true,
        helpers : {
            overlay : {
                css : {
                    'background-color' : '#000'
                }
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    }
    );
}
);
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();      
</script>

そして、HTML内に画像とビデオを表示する方法は次のとおりです。

<a class="fancybox" rel="gallery1" href="image1.jpg">
<a class="fancybox" rel="gallery1" href="image2.jpg">
<a class="vimeo" rel="gallery2" href="videoplayerlink1">
<a class="vimeo" rel="gallery2" href="videoplayerlink2">

.js ファイル内で何かを追加または変更する必要がありますか? 私は何が欠けていますか？

4

1 に答える 1

12

まず、オプションを使用すると、fancybox ラップ ( )にwrapCSS新しいセレクターが追加されることを理解する必要があります。そのため、オプションを追加すると、fancyboxを開くと、class.fancybox-wrapwrapCSS:'fancybox-nav-video'

<div class="fancybox-wrap fancybox-nav-video ....etc." ....

次に、そのような新しいセレクターの特定の fancybox ボタン CSS プロパティを宣言する必要があります (fancybox css ファイルをロードした後のインライン CSS 宣言)。

.fancybox-nav-video .fancybox-nav {
    width: 60px;       
}
.fancybox-nav-video .fancybox-nav span {
    visibility: visible; /* arrows will be permanently visible */
}
.fancybox-nav-video .fancybox-next {
    right: -60px; /* move right outside fancybox area */
}
.fancybox-nav-video .fancybox-prev {
    left: -60px; /* move left outside fancybox area */
}

これらの新しい css プロパティは、fancybox wrap with class (オプションfancybox-nav-videoを使用した場所)にのみ適用されることに注意してください。wrapCSSこれらの css は、ファンシーボックスの外側にボタンとクリック可能な領域を配置し、vimeos の再生ボタンをクリアします。そのため、ナビゲーション矢印を永続的に表示できるようにしました。そうしないと、訪問者はどこにホバーすればよいかわかりません。

3 番目.ready()に、すべての fancybox カスタム スクリプトを次のような単一のメソッド内にラップする必要があります。

<script type="text/javascript">
 $(document).ready(function() {

// fancybox for vimeo
  $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS : 'fancybox-nav-video' // add a class selector to the fancybox wrap
  });

// fancybox for images
  $(".fancybox").fancybox({
   // options for images here
  });

 }); // ready
</script>
于 2012-07-25T23:28:57.920 に答える