0

「カラーボックス」を搭載したライトボックスを起動する一連のボタンがあります。各ライトボックスの内部には、'RoyalSlider' を利用したスライダーがあります。すべてのスライダーは外部の html ドキュメントにあり、カラーボックスはモーダルがトリガーされるたびに ajax を介してそれらを読み込みます。これが機能していることは、http: //j2designpartnership.com/ob3で確認できます。

残念ながら、colorbox にはモーダル ボックスを切り替える方法がありません (ajax 経由でコンテンツをプルしている場合)。モーダル内のリンクから各モーダル内のコンテンツを切り替えることができるソリューションを考え出そうとしています。現在、onComplete コールバック (モーダルの読み込みが完了したとき) で、AJAX 経由で新しいデータをスライドに取り込もうとしています。

私のjsは次のとおりです。

$('a[rel="group"]').on('click', function(e) {

    e.preventDefault();

    $.colorbox({

        href: $(this).attr('href'),
        //other arguments
        onComplete: function(e) {

            $('#cboxLoadedContent').find('.royalSlider').royalSlider({
             //all of the arguments here
            }).data('royalSlider');

             $('a.nextSlide').on('click', function(e){
                e.preventDefault();

                var url = $(this).attr('href'); 

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'html',
                    cache: true,
                    beforeSend: function() {
                        $('#cboxLoadedContent').empty();
                        $('#cboxLoadingGraphic').show();
                    },
                    complete: function() {
                        $('#cboxLoadingGraphic').hide();
                    },
                    success: function(data) {                  
                        $('#cboxLoadedContent').append(data);
                        $('#cboxLoadedContent').find('.royalSlider').royalSlider({same arguments as above}).data('royalSlider');
                    }
                });

            });
        }
    });
});

各モーダル内には、次のようなアンカー リンクがあります。

次のスライド

クリックすると、新しいコンテンツがモーダルに読み込まれますが、その時点以降のクリックでは、href または html ページが読み込まれます。これは、最初のモーダルがコールバックを実行していて、クリック イベントを探しているためです...しかし、その後は ajax 呼び出しにコールバックがないため、クリック イベントを探していません。何か案は？

4

0 に答える 0