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中。这就是为什么你的黑客在IE中工作但在其他地方没有。

我不确定colorbox是如何工作的，但看起来它不能采用正常的URL数组并将其指定为一组图像，然后手动调用每个框。但你可能会做这样的事情（黑客）：

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

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

$(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">

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

3 个答案: