javascript - Blueimp 画廊 : External link on carousel images

Question

我已经使用 Blueimp Gallery 插件 ( https://github.com/blueimp/Gallery ) 设置了一个旋转木马，它可以正常工作，但是当我单击图像时，我想禁用控件切换，而是具有指向网站另一页面的默认链接行为.

我需要指示器始终可见。是否可以使用“a”标签的 href 值转到另一个页面？

HTML :

<div id="images-slider">
    <a href="http://www.google.fr" data-link="http://lorempixel.com/878/330/nature/9/">
        <img src="http://lorempixel.com/878/330/nature/9/" alt="">
    </a>
    <a href="http://www.google.fr" data-link="http://lorempixel.com/878/330/nature/4/">
        <img src="http://lorempixel.com/878/330/nature/4/" alt="">
    </a>
    <a href="http://www.google.fr" data-link="http://lorempixel.com/878/330/nature/5/">
        <img src="http://lorempixel.com/878/330/nature/5/" alt="">
    </a> 
</div>

JS:

blueimp.Gallery(
    document.getElementById('images-slider').getElementsByTagName('a'),
    {
        container: '#slider',
        carousel: true,
        thumbnailIndicators: false,
        urlProperty: 'link'
    }
);

这是一个 fiddle :http://jsfiddle.net/0hb7gdeq/1/

谢谢

Answer 1

我不认为这在任何方面都是最佳的，但我通过像这样在 innerHTML 周围包装另一个标签来让它工作。

blueimp.Gallery(
    document.getElementById('images-slider').getElementsByTagName('a'),
    {
    container: '#slider',
    carousel: true,
    thumbnailIndicators: false,
    urlProperty: 'link',
    onslidecomplete: function (index, slide) {
        var href = this.list[index].getAttribute('href');
        slide.innerHTML = "<a href='"+href+"'>" + slide.innerHTML + "</a>";
    }
);

在这个 hack 之后，css 也需要调整

.blueimp-gallery>.slides .slide .slide-content {
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}