Jquery 猫头鹰旋转木马:跳转到具有特定id的幻灯片
我知道有可能通过当前位置号跳转到猫头鹰转盘中的某个位置。比如:Jquery 猫头鹰旋转木马:跳转到具有特定id的幻灯片,jquery,slider,carousel,owl-carousel,Jquery,Slider,Carousel,Owl Carousel,我知道有可能通过当前位置号跳转到猫头鹰转盘中的某个位置。比如: $('.jumpTo').click(function(){ carousel.trigger('owl.jumpTo', 3) }); 是否可以跳转到匹配的ID?假设我有一个带有缩略图的站点,点击其中一个打开一个模式,猫头鹰转盘在正确/匹配的位置。比如: var myattr = $(this).attr('subcategory'); $('.jumpTo').click(function(){ carousel.tr
$('.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中打开
第二次编辑:
很抱歉,规格已更改,这会变得更加困难。owl滑块在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> </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,owl转盘将跳转到第三个匹配项。您可以按子类别获取元素,然后使用索引使其与owl兼容,如下所示:
var myattr = $(this).attr('subcategory');
$('.jumpTo').click(function(){
var owlNumber = $('.owl').find('[subcategory="' + myattr + '"]').index();
carousel.trigger('owl.jumpTo', owlNumber)
});
编辑您可以使用fancybox进行此操作,类似的操作应该可以:
$('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');
});
此代码应该在您的特定情况下工作,但您可以考虑将FANKYBOX.IFRAME注入链接,而不是阻止默认。
< P>只是面对同样的问题,所以我必须解决它。它可能对某人有用 /**
* Get owl carousel slider number for an image with specific class
*
* @param cls
* @returns {*}
*/
function findOwlNumberForSlideByClass(cls) {
const slides = $('#slider-card').find('.owl-item:not(.cloned)');
let index;
(slides).each((i, slide) => {
if ($(slide).find(cls).length) {
index = i;
}
});
return index;
}
看起来不错,但当我编辑时,这两个元素之间的沟通变得更加棘手…:-/我不是舒尔。。。单击$'.jumpTo'。单击将来自网站本身,其余部分位于iframe上。这行得通吗?请提供你想要做的代码或伪代码谢谢你的努力!请提供您如何在fancybox中启动自己的旋转木马的代码