0

ボタンヘルパー付きの最新のfancyboxを使用しています。fancyboxに画像全体を表示するのではなく、サイズの切り替えボタンを作成して、新しいウィンドウで画像だけを起動する方法はありますか？

どんな助けでもいただければ幸いです

4

2 に答える 2

1

私があなたの質問を理解した場合、トグルサイズボタンヘルパーをクリックすると、新しいブラウザウィンドウ/タブで現在の画像が開くはずです、それは正しいですか？

もしそうなら、最初にファンシーボックスのトグルサイズボタンヘルパーのhtml構造を検討してください：

<a href="javascript:;" title="Toggle size" class="btnToggle"></a>

セレクター.btnToggleは、fancyboxスクリプト内で、現在の画像のサイズを切り替える関数にバインドされており、その動作を変更するのは非常に難しい場合があります（関数のバインドを解除/破棄して、新しい関数を割り当てるなど）。

私がすることは

1）。トグルボタンヘルパーを別のクラス（私はそれと呼びます.btnToggleClone）で複製し、そのcssプロパティを元のクラスとまったく同じに設定して.btnToggle、同じ画像スプライト（./helpers/fancybox_buttons.png）を使用できるようにします。

#fancybox-buttons a.btnToggleClone {
    background-position: 3px -60px;
    border-left: 1px solid #111111;
    border-right: 1px solid #3E3E3E;
    width: 35px;
}

2）。clickイベントを新しいクラスにバインドして、現在の画像（ el）を新しいウィンドウで開きます。

$("body").on("click", ".btnToggleClone", function () {
    window.open(el);
});

委任された形式で使用しているため、クラスは現在または将来のDOM要素にバインドされることに注意.on()してください（ファンシーボックスを開くと、ボタンヘルパーが動的にDOMに追加されます）。

パラメータel（要素）はfancyboxコールバックによって渡されます（以下を参照）

3）。次のようなAPIオプションを使用して、新しいクラスをfancyboxボタンヘルパーテンプレートに配置します。tpl

helpers: {
    buttons: {
        // replace the class "btnToggle" by "btnToggleClone" 
        tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggleClone" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>'
    }
}

4）。el次のようなfancyboxafterShowコールバック内でパラメーターを渡します。

afterShow: function () {
    el = $(this.element).attr("href");
}

$(this.element).attr("href")ターゲット画像のURLはどこですか。

完全に？

$(".fancybox").fancybox({
    closeBtn: false,
    helpers: {
        buttons: {
            // replace class "btnToggle" by "btnToggleClone" 
            tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggleClone" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>'
        }
    },
    afterShow: function () {
        el = $(this.element).attr("href");
    }
});

JSFIDDLEを参照してください

注：.on()jQueryv1.7+が必要です

于 2013-03-24T10:37:56.113 に答える
0

サイズの切り替えボタンがページにどのように表示されるかはわかりませんが、単純なjQソリューションは次のコードのようなものである可能性があります。

$('.sizeButton').on('click',function(e){
   e.preventDefault();
   activeImgURL = $('.fancybox-inner img').attr('src');
   window.open(activeImgURL);
});

ただのアイデア....ここで編集 してください。

編集2-----------------------------

ページが最初に読み込まれたときに要素が存在しないため、まだ作成されていない要素のクラスにハンドラーをバインドする必要があるため、問題が発生しました。

この編集されたバージョンのzipを参照してください。

私が追加したのは、125行目以降の以下のコードだけです。

$('body').on('click','.btnToggle' ,function(e){
   e.preventDefault();
   activeImgURL = $('.fancybox-inner img').attr('src');
   window.open(activeImgURL);
});
于 2013-03-24T00:32:31.707 に答える