-1

画像にファンシーボックスが必要なWebサイトに取り組んでいます。ただし、これらの画像は、booklet.js を使用して実現した小冊子の一部であるため、HTML では時系列順に配置されていません。だから私の質問は、fancyboxが私の画像を開く順序を判断できますか?

私はこれをしばらくの間機能させようとし、実証目的でフィドルを作成しました。

http://jsfiddle.net/XF8WW/7/

私のフィドルでは、クリックされた画像と、次/前の画像が何であるかを判断します。次に、fancybox が最初の試行で正しい画像を開くかどうかを確認します。失敗した場合は、fancybox を閉じて、正しい画像を自分で開いてみます。

私のソリューションの唯一の問題は、私が最後に書いた関数 (clickPage) にあります。clickPage では、fancybox を閉じて、正しい画像のために再度開きます。残念ながら、fancybox が完全に閉じないか、その画像に対して再び開かないかのいずれかです。

function clickPage($pageNr) {
  $.fancybox.close();
  //$('.fancybox-overlay.fancybox-overlay-fixed').click();
  $pageNrMinOne = $pageNr - 1;
  $pageNrMinOne = $pageNrMinOne.toString();
  $pageNr = $pageNr.toString();
  console.log($pageNr);
  console.log($pageNrMinOne);
  $(".page" + $pageNr).eq($pageNrMinOne).trigger('click');
  //$('.page' + $pageNr).click();
}

コンソールに入力するとコードが機能するため、コードが機能することはわかっています。

お時間をいただきありがとうございます 良い一日を

4

2 に答える 2

1

了解しました。なんとか修正できました。私の小冊子にこのスクリプトを使用するのではなく：http： //www.netzgesta.de/booklet/ このスクリプトを使用したHTMLを再配置します ：http： //builtbywill.com/code/booklet/

後者はHTMLを再配置せず、私の意見では、これまでのところ最高の小冊子スクリプトです。

返信ありがとうございます！

良い１日を

于 2013-01-29T07:55:52.550 に答える
0

（img srcを使用する代わりに）データのニーズを個別に処理し、最初の引数としてfbsigに渡すことをお勧めします。

    var images = [
        {
           'href' : 'http://dromenopmaat.be/dromen_op_maat/images/nl/1_big.jpg',
           'title' : 'some title'  //optional
        },
        {
           'href' : ' http://dromenopmaat.be/dromen_op_maat/images/nl/2_big.jpg ',
           'title' : 'some title'
        },
            //etc
    ]

    $.fancybox.open( 
        images,
        {
            index       : 0,
            nextEffect  : 'none', 
            prevEffect  : 'none',
            margin      : 100,
            padding     : 10,
            type        : 'image',
            wrapCSS     : 'fancy-gallery-wrapper',
            helpers     : {
                overlay : {
                    speedIn  : 0,
                    speedOut : 300,
                    opacity  : 0.7
                },
                title   : {
                    type    : 'inside'

                }
            }
    });

（fancybox v2.0）

最終的には、プロジェクトを不必要に複雑にしていることになります。希望する順序でjsonオブジェクトを作成し、必要な追加のパラメーターをfbに送信します（プロジェクトからこれを取得しただけなので、適切と思われるように調整します）。

お役に立てば幸いです-

于 2013-01-24T15:47:27.133 に答える