1

現在、ファンシーボックスの画像ポップアップにソーシャル共有ボタンを統合しようとしています。これがどのように行われるかを示すためにFancyboxが作成したJsFiddleがあります...しかし、私は「ヘルパー」を使用しています> jquery.fancybox-buttons.js（こちらを参照）。ファンシーボックス画像がポップアップしたときに、その下にソーシャル共有ボタンがあるように、これらの両方のカスタムソリューションを組み合わせるにはどうすればよいですか (JSFiddle のように & ボタンヘルパーがありますか?

Fancybox ギャラリーの私のページの HTML の例を次に示します。

<div id="painting" class="content-pages">

<p>
    <a class="fancybox-buttons" href="painting/2011_b.jpg" data-fancybox-group="paintings" title="Sed vel sapien vel sem uno"><img src="painting/2011_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/beginnings-3_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings III"><img src="painting/beginnings-3_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/t-beginnings-i_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings I "><img src="painting/t-beginnings-i_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/t-beginnings-ii_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings II"><img src="painting/t-beginnings-ii_s.jpg" alt="" /></a>
</p>
</div>
4

1 に答える 1

2

まず、jsおよびcssボタンのヘルパーファイル（ダウンロードのhelpersサブディレクトリにあります）をロードする必要があります。

次に、ボタンヘルパーオプションをカスタムスクリプトに追加します。closeデフォルトとボタンを無効にしてarrows、ボタンヘルパーのみを使用することをお勧めします。

したがって、追加する必要のあるコードは次のようになります。 

// other options
helpers: {
    title: {
        type: 'inside'
    }, //<-- add a comma to separate the following option
    buttons: {} //<-- add this for buttons
},
closeBtn: false, // disable default close
arrows: false    // disable default arrows

同じ変更されたJSFIDDLEを参照してください。

于 2013-02-05T21:39:36.037 に答える