多个图库的多个fancybox配置可以合并为一个脚本标记吗?

时间:2014-01-05 18:12:03

标签: jquery fancybox-2

我们在同一页面上有两个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;
  });
});

0 个答案:

没有答案
相关问题