Question

我已经设置了一个带有Blueimp Gallery插件（https://github.com/blueimp/Gallery）的旋转木马，它正在工作但是当我点击图片时，我想要禁用控件切换，而是默认将行为链接到网站的另一个页面。

我需要指标始终可见。是否可以使用＆＃34; a＆＃34;标记的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/

THX

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

在这次黑客攻击之后，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>";
                }

            }
        );

    });

Blueimp Gallery：旋转木马图像的外部链接

2 个答案: