猫头鹰旋转木马：跳转到某个编号的幻灯片

Question

我知道有可能通过当前位置编号跳转到猫头鹰旋转木马中的某个位置。如：

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

是否可以跳转到匹配ID？假设我有一个带有缩略图的网站，点击其中一个可以打开一个模式，猫头鹰传送带位于右侧/匹配位置。例如：

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

在此先感谢！

编辑：

的哈希URL搜索解决方案也将是巨大的，但是：猫头鹰旋转木马在的fancybox开辟了......

第二个编辑：

对不起，规格变更并且变得更加困难。猫头鹰滑块在fancybox模式的iframe中打开。任何想法如何将数据传递给它？

第三编辑：

<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> 

所以，如果我的href点击网站猫头鹰转盘应该

从网站代码跳转到第三个（匹配）项目。

Answer 1

您可以通过子类别取得元素，然后使用索引，使其与猫头鹰这样的兼容：

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

编辑可以使用的fancybox callback 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注入链接而不是防止默认值。