Blueimp Gallery : 轮播图像上的外部链接

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

这是一个小提琴：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;
}

Answer 2

感谢 oBo，我扩展了您的代码，使其也可以使用我在幻灯片上需要的 title 属性，并使用一些 jQuery 来查找 title 属性。

var title;
// [...]

onslidecomplete: function(index, slide) {
                        title = $(slide).find("img").attr("title");
                        var href = this.list[index].getAttribute('href');
                        slide.innerHTML = "<a href='" + href + "' title='"+title+"'>" + slide.innerHTML + "</a>";
                    }

完整代码：

HTML

<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
        <div id="blueimp-gallery-carousel-home" class="my-blueimp-gallery blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
            <div class="slides"></div>
            <div class="menu-tile-text">
                <h4 class="title"></h4>
                <span class="icon-bar"></span>
            </div>
            <a class="play-pause"></a>
            <ol style="bottom: 12px;" class="indicator"></ol>
        </div>

        <div id="links-home" style="display:none;">
            <a href="#/somesite" data-link="assets/img/640x360.jpg" title="banana">
                <img src="assets/img/640x360.jpg" alt="banana">
            </a>
            <a href="#/site" data-link="assets/img/640x360.jpg" title="banana">
                <img src="assets/img/640x360.jpg" alt="banana">
            </a>
        </div>

JS

$(document).ready(function() {

        //BlueImp Carousel
        document.getElementById('links-home').onclick = function(event) {
            event = event || window.event;
            var target = event.target || event.srcElement,
                link = target.src ? target.parentNode : target,
                options = {
                    index: link,
                    event: event
                },
                links = this.getElementsByTagName('a');
            blueimp.Gallery(links, options);
        };

        var title;
        blueimp.Gallery(
            document.getElementById('links-home').getElementsByTagName('a'), {
                container: '#blueimp-gallery-carousel-home',
                carousel: true,
                thumbnailIndicators: false,
                transitionSpeed: 400,
                slideshowInterval: 8000,
                clearSlides: true,
                titleElement: 'h4',
                urlProperty: 'link',
                onslidecomplete: function(index, slide) {
                    title = $(slide).find("img").attr("title");
                    var href = this.list[index].getAttribute('href');
                    slide.innerHTML = "<a href='" + href + "' title='" + title + "'>" + slide.innerHTML + "</a>";
                }

            }
        );

    });