1

我以为我已经解决了这个问题，但不幸的是它在 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 之外的任何图像进行分组，但至少我有一个灯箱。

4

3 回答 3

1

我已经解决了这个问题。您必须将链接放在 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>
于 2011-04-09T03:39:21.417 回答
1

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

我不确定颜色框是如何工作的，但看起来它不能采用正常的 URL 数组并将其分配为一组图像，然后在单击时手动调用每个框。但是你也许可以做这样的事情（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();
            });
        });
    }
});
于 2010-07-30T21:35:17.417 回答
0

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

具体来说

<script type="text/javascript>

应该

<script type="text/javascript">
于 2010-07-28T15:58:00.853 回答