我们在同一页面上有两个fancybox画廊,两者共享相同的配置选项 - 但是一个画廊是手动创建的,另一个使用通常的fancybox大拇指来触发叠加。
问题1:
有没有办法合并共享配置选项,将它们附加到点击的图库并仍然手动构建其中一个图库?
问题2:
手动构建的库是使用php输出的 - 有没有办法让php输出逗号,但是将逗号从最后一个图像中删除?
我们已经将最后一张图片留在了循环中,但显然输出了两次(我们正在使用kirby CMS) - 而在下面就是我们想要在两个图库之间共享的所有fancybox配置:< / p>
$(function() {
$(".product-main-gallery").click(function() {
$.fancybox.open([
<? foreach($page->images() as $image): ?>
{
href : '<?= $image->url() ?>',
rel : 'product-main-gallery'
},
<? endforeach ?>
{
href : '<?= $page->images()->last()->url(); ?>',
rel : 'product-main-gallery'
}
], {
openEffect : 'fade',
closeEffect : 'elastic',
nextEffect : 'fade',
prevEffect : 'fade',
nextSpeed : 'slow',
prevSpeed : 'slow',
arrows : 'true',
// configure overlay style
padding : 0,
margin : 0,
autoCenter : false,
helpers : {
// configure overlay colour
overlay : {
css : {
'background' : 'rgba(255, 255, 255, 1)'
}
}
},
// Force overlay image to full screen
// http://jsfiddle.net/2XhjG/
afterLoad : function () {
$.extend(this, {
aspectRatio : false,
type : 'html',
width : '100%',
height : '100%',
content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
});
}
});
return false;
});
});