我让jQuery Isotope正常运行,因此它创建了一个很好的链接列表,当用户点击链接时,它会按预期在Fancybox中提取iframe。我想添加到这个,所以我可以在页面加载时运行Fancybox。我需要添加什么?
用户流程:
[user on another page] -> [user clicks link] -> [redirect to this page/code which runs Fancybox on pageload]
目前的同位素代码:
<div class="portfolioFilter">
Filter by:
<a href="#" data-filter="*" class="button3">Show All</a>
<a href="#" data-filter=".A" class="button3">A</a>
<a href="#" data-filter=".B" class="button3">B</a>
...
</div>
<div class="portfolioContainer">
<div class="A isospacing">
<a href="page.html" class="various" data-fancybox-type="iframe" id="S54"><span class="description">John Doe</span></a>
<a href="page2.html" class="various" data-fancybox-type="iframe" id="S55"><span class="description">Jane Doe</span></a>
...
</div>
</div>
Jquery代码:
$(window).load(function(){
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
}).trigger("click");
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
答案 0 :(得分:0)
FYI,
我用这个解决了它:
<script type="text/javascript">
$(document).ready(function () {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.Website.com/Details'
});
});