javascript - Galleria + Colorbox 在 IE 中工作，而不是其他

Question

我以为我已经解决了这个问题，但不幸的是它在 FF 或 Chrome 中不起作用。我有一个图像列表，我想在我的页面上显示为带轮播的幻灯片。当用户单击较大的图像时，我希望它在灯箱中打开全尺寸图像。这是在 IE 中工作的代码:

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/galleria.js" type="text/javascript"></script>
<script src="Scripts/galleria.classic.js" type="text/javascript"></script>
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>


<script type="text/javascript">
$(document).ready(function() {
    $('a[rel=test]').colorbox();

    $('#exteriorSlideShow_gallery').galleria({
        max_scale_ratio: 1,
        image_crop: false,
        height: 210,
        transition: 'fade',
        extend: function() {
            this.bind(Galleria.LOADFINISH, function(e) {
                $(e.imageTarget).click(this.proxy(function(e) {
                    e.preventDefault();
                    $('a[rel=test]').eq(this.active).click();
                }));
            });
        }
    });
});
</script>

在上面，“this.active”表示轮播当前所在图像的索引。由于以下链接的显示顺序相同，因此它对应于我希望点击的正确链接。

<div id="exteriorSlideShow_gallery">
    <a href="/Images/ORIG1.gif" rel="test"><img src='/Images/THUMB1.gif' /></a>
    <a href="/Images/ORIG2.gif" rel="test"><img src='/Images/THUMB2.gif' /></a>
    <a href="/Images/ORIG3.gif" rel="test"><img src='/Images/THUMB3.gif' /></a>
</div>

有人知道为什么这在 IE 以外的任何地方都不起作用吗？

编辑目前我已经解决了。如果浏览器是 IE，我调用上面的代码，否则我使用 $.colorbox({ 'href': urloflargeimage })。除了 IE，这不允许对图像进行分组，但至少我有一个灯箱。

Answer 1

Galleria 在抓取必要数据后会剥离大部分容器内容，但由于加载错误，它会将其隐藏在 IE 中。这就是为什么您的 hack 在 IE 中有效但在其他地方无效。

我不确定 colorbox 是如何工作的，但看起来它不能采用普通的 URL 数组并将其分配为一组图像，然后手动调用每个框 onclick。但是你也许可以做这样的事情(hack):

var box = $('a[rel=test]').clone().colorbox(); // save the colorbox array

$('#exteriorSlideShow_gallery').galleria({
    extend: function() {
        this.bind(Galleria.LOADFINISH, function(e) {
            var index = this.active;
            $(e.imageTarget).bind('click', { active: this.active }, function(ev) {
                box.eq(ev.data.active).click();
            });
        });
    }
});