貓頭鷹旋轉木馬：跳轉到某個編號的幻燈片

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注入鏈接而不是防止默認值。