2

現在の位置番号によって、フクロウのカルーセルの特定の位置にジャンプできる可能性があることを知っています。お気に入り：

$('.jumpTo').click(function(){
  carousel.trigger('owl.jumpTo', 3)
});

一致するIDにジャンプすることはできますか？サムネイルのあるサイトがあり、そのうちの 1 つをクリックするとモーダルが開き、フクロウのカルーセルが適切な位置/一致する位置にあるとします。何かのようなもの：

var myattr = $(this).attr('subcategory');
$('.jumpTo').click(function(){
  carousel.trigger('owl.jumpTo', '[subcategory="' + myattr + '"]')
});

前もって感謝します！

編集：

ハッシュ URL ソリューションも素晴らしいですが、フクロウのカルーセルがファンシーボックスで開きます...

2番目の編集:

すみません、仕様が変わって難しくなりました。フクロウのスライダーは、fancybox モーダルの iframe で開きます。それにデータを伝達する方法はありますか?!

3番目の編集:

ウェブサイトのコード:

<div id="theid" class="joinlight breit-quarter" subcategory="test">
        <div class="breit-quarter-inside">
        <a id="content_1_phcontent_1_rptPictures_ctl00_lnkImage" class="quarterthumb fancybox fancybox.iframe " href="extern1.html"></a>
        <p>Quartier Reiterstaffel: Dies ist ein Testtext</p>
        <p>&nbsp;</p>
        <p><a id="content_1_phcontent_1_rptPictures_ctl00_lnkDownloadJPG" class="jobTitle" href="http://placehold.it/400x300">Download JPG</a></p>
        <p></p>
        </div>
    </div>

iframe からのコード:

<div id="wrap">
            <div id="wrap_small">
            <div id="sync2" class="owl-retro-carousel">
              <div class="item"><img src="http://placehold.it/80x60" /></div>
              <div class="item"><img src="http://placehold.it/80x60" /></div>
              <div class="item"><img src="http://placehold.it/80x60" /></div>

            </div>
            </div>
        <div id="wrap_big">
        <div id="sync1" class="owl-retro-carousel">
              <div class="item"><img src="http://placehold.it/500x500" /><p>Room shot at the Delta Bow Valley during the speaker presentations</p></div>
              <div class="item"><img src="http://placehold.it/500x500" /><p>Derrick Rozdeba, Bayer CropScience, presenting to delegate teams on how to present their ideas</p></div>
              <div class="item" subcategory="test"><img src="http://placehold.it/500x500" /><p>Team presentations on Friday</p></div>

            </div>
            </div>
        </div>

したがって、webiste の href をクリックすると、フクロウのカルーセルが 3 番目の (一致する) 項目にジャンプするはずです。

4

2 に答える 2

2

サブカテゴリごとに要素を取得し、インデックスを使用して、次のようにフクロウと互換性を持たせることができます。

var myattr = $(this).attr('subcategory');
$('.jumpTo').click(function(){
   var owlNumber = $('.owl').find('[subcategory="' + myattr + '"]').index();
   carousel.trigger('owl.jumpTo', owlNumber)
});

編集これには、 fancyboxコールバック APIを使用できます。次のようなものが機能するはずです。

$('fancybox.iframe').click(function (event) {
    event.preventDefault();
    var category = $(this).attr('subcategory');
    $('fancybox.iframe').fancybox({
        afterLoad: function() {
            $('.owl-retro-carousel').owlCarousel();
            if(category !== undefined) {
                var owlNumber = $('.owl').find('[subcategory="' + myattr + '"]').index();
                carousel.trigger('owl.jumpTo', owlNumber);
            }
        }
    }).trigger('click');
});

このコードは特定のケースで機能するはずですが、デフォルトを防止する代わりに、fancybox.iframe をリンクに挿入することを検討してください。

于 2014-10-06T13:13:25.777 に答える