2

ファンシーボックスを使ったフォトギャラリーサイトを作っています。次/前にナビゲートするために、現在の動作方法では、リンク領域は矢印の位置に関連付けられています。各画像のほぼ中央から矢印画像の y 軸までの任意の場所をクリックできます。矢印を画像から遠ざけると、クリック可能な領域が広がります。これをcssファイルで行います。私のクライアントが（何らかの理由で）望んでいるのは、矢印が写真から外れることなく、ブラウザウィンドウの端まで右/左をクリックできるようにすることです。

どうやってやるの？以下は、矢印イメージ (base64 形式) の位置を制御する css ファイルのセクションです。

a.fancybox-prev {
left: 0px;
}

a.fancybox-next {
right: 0px;
}

上記は、矢印を写真の内側または外側に移動します。

a.fancybox-nav span {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
margin-top: -23px;
cursor: pointer;
z-index: 8040;
}

上記は、スプライトと垂直方向の配置に関係しています。

a.fancybox-prev span {
left: 0;
background-position: 0 -50px;
}

a.fancybox-next span {
right: 0;
background-position: 0 -100px;
}

上記は、矢印、閉じるボタン、拡大アイコンも変更します。

私はすべての組み合わせを試しましたが、今では何時間もそれを続けています. ブラウザウィンドウの左半分全体を「前の」リンクにし、ウィンドウの右側も同じにする方法についてのアイデアはありますか?

カーク

4

1 に答える 1

2

これは確かに奇妙な要求ですが、私はそうします、

最初に、オーバーレイ (fancybox の外側) をクリックしたときの fancybox のクローズを無効にし、

click次に、 aを fancybox のオーバーレイにバインドし、訪問者がコンテンツの左または右をクリックしたかどうかを確認し、それに応じて$.fancybox.prev()または$.fancybox.next()メソッドを次のように呼び出します。

$(".fancybox").fancybox({
    margin: [20, 60, 20, 60], // Increase left/right margin for arrows position
    helpers: {
        overlay: {
            closeClick: false // prevents closing when clicking overlay (outside fancybox)
        }
    },
    afterShow: function () {
        var offset = $(".fancybox-inner").offset(),
            offset_Right = offset.left + $(".fancybox-inner").width();
        $(".fancybox-overlay").css("cursor", "pointer").on("click", function (e) {
            if ( e.pageX < offset.left ) {
                $.fancybox.prev();
            } else if ( e.pageX > offset_Right ) {
                $.fancybox.next();
            }
        });
    }
});

次に、いくつかの css を使用して、矢印を必要な場所に配置できます。

JSFIDDLEを参照してください

于 2013-09-22T09:34:14.793 に答える