画廊 + 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。但你也许可以做这样的事情（黑客）：

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();
            });
        });
    }
}); 

Answer 2

我已经解决了这个问题。您必须将链接放在画廊容器外部，与图像分开，然后在单击图像时单击它们。像这样：

$(document).ready(function(){

Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$('a[rel="lightbox"]').colorbox();
var targ;

$("#gallery").galleria({
    autoplay: 6000,
    transitionSpeed: 1000,
    transitionInitial: 'fade',
    width: 958,
    height: 443,
    imageCrop: 'width',
    minScaleRatio: 1,
    extend: function() {
        this.bind(Galleria.IMAGE, function(e) {

            $(e.imageTarget).css('cursor','pointer');

            $(e.imageTarget).click(this.proxy(function() {

                targ = $(e.imageTarget).attr('src');

                $('a[href="'+targ+'"]').click();

            }));
        });
    }

});

});

HTML 看起来像：

<div id="gallery">
    <img src="images/jqIm4.jpg" />
    <img src="images/jqIm5.jpg" />
</div>
<div id="source">
    <a href="images/jqIm4.jpg" rel="lightbox"></a>
    <a href="images/jqIm5.jpg" rel="lightbox"></a>              
</div>

Answer 3

脚本标记缺少引号字符。你的实际来源是这样的吗？如果是这样，那可能会严重扰乱 Firefox。

具体

<script type="text/javascript>

应该是

<script type="text/javascript">