2

私の問題は、最初のページの読み込み時に完全に読み込まれない大きなギャラリーがあることです。そこで、50 枚の画像のうち 10 枚を読み込み、fancybox を追加します。ユーザーが次のボタンをクリックすると、11 番目の画像が Ajax 経由で読み込まれ、ギャラリー コンテナーに追加されます。

問題は、fancybox が 10 番目の画像で停止することです。これは、動的ロードのものを認識していないためです。

動的に読み込まれた画像を fancybox2 に追加するにはどうすればよいですか?

現在、私はこれを持っています:

function loadFancybox() {
    $('a.lightbox').fancybox({
        helpers: {
            overlay: {
                css: {
                    'background': 'rgba(0,0,0,0.8)'
                }
            }
        },

        beforeLoad: function() {
            this.title = $(this.element).data('title');
            ajaxGetNextImages();
            loadFancybox();
        },
        loop: false
    });
}
loadFancybox();

ajaxGetNextImages()次の画像を取得します:)

その後、loadFancybox() を呼び出して、すべての新しい画像がギャラリーに属するようにします。しかし、ファンシーボックスを再度開くまで、それらは含まれていません...

4

2 に答える 2

4

OK、楽しみのために、このGitHubの問題でのimran-aのコメントに基づいて、ハッキングされたソリューション を次に示します。

$(".fancybox").fancybox({
    loop: false,
    beforeLoad: function () {
        if ((this.index == this.group.length - 1) && !done) {
            ajaxGetNextImages();
            done = true;
            this.group.push(
               { href: "images/04.jpg", type: "image", title: "Picture 04", isDom: false },
               { href: "images/05.jpg", type: "image", title: "Picture 05", isDom: false },
               { href: "images/06.jpg", type: "image", title: "Picture 06", isDom: false }
            ); // push 
        } // if
    } // beforeLoad
}); // fancybox

呼び出し (新しい画像をドキュメント フローに配置する) とは別にajaxGetNextImages()、新しい画像を fancybox のグループ内に (手動で) プッシュする必要があることに注意してください。

完全な解決策ではありませんが、機能します。DEMO HEREを参照してください。ページの読み込み時に 3 つのサムネイルが表示されます。fancybox を開いて最後のアイテムに移動すると、さらに 3 つのサムネイルがドキュメントに追加され、対応する 3 つの画像が fancybox ギャラリーに追加されます。

var done = false;また、スクリプトの先頭で初期化する必要があることに注意してください。

ところで、関数は忘れてくださいloadFancybox()。必要ありません。

于 2013-03-19T18:13:51.577 に答える
0

.fancybox();画像を動的に読み込んだ後、もう一度呼び出してみてください

于 2013-03-19T13:39:07.767 に答える