猫头鹰轮播:跳转到具有特定ID的幻灯片 [英] Owl carousel: jump to a slide with an certain id

问题描述

我知道有可能通过当前位置编号跳到猫头鹰轮播中的某个位置.喜欢:

I know that there is the possibility to jump to a certain position in the owl carousel by current position-number. Like:

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

是否可以跳转到匹配的ID?假设我有一个带有缩略图的站点，单击其中的一个会打开一个模式，其中猫头鹰轮播蜂在右侧/匹配位置.像这样:

Would it be possible to jump to matching ID? Let's assume that I have a site with thumbnails and the click on one of them opens a modal with the owl carousel beeing at the right/matching position. Something like:

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

提前谢谢！

一个哈希URL解决方案也很好，但是:猫头鹰轮播会在一个花哨的盒子中打开...

An hash-URL solutio would also be great, but: the owl carousel opens up in an fancybox...

第二

对不起，规格已更改，并且变得更加困难.猫头鹰滑块会在fancybox模式的iframe中打开.有什么想法如何将数据传达到其中吗?！

Sorry, the specifications was changed and it gets more difficult. The owl slider opens up in an iframe in an fancybox modal. Any ideas how to communicate the data into it?!

第三次

代码:

<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中的代码:

Code from the 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，则猫头鹰传送带应跳至第三项(匹配项).

So, if i click on the href on the webiste the owl carousel should jump to the third(matching) item.

推荐答案

您可以按子类别获取元素，然后使用索引使其与owl兼容，如下所示:

You can get the element by subcategory and then use the index to make it compatible with owl like this:

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

编辑，您可以使用fancybox 回调API 来完成，类似这样的操作:

Edit You can use fancybox callback API for this something like this should work:

$('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注入链接中，而不是阻止默认设置.

This code should be working in your particular case, but you might consider to inject fancybox.iframe into the link instead of preventing default.

这篇关于猫头鹰轮播:跳转到具有特定ID的幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！