如何将 html 添加到 blueimp 画廊标题元素答案

【问题标题】：How to add html to blueimp gallery title element如何将 html 添加到 blueimp 画廊标题元素
【发布时间】：2018-03-06 00:00:37
【问题描述】：

我正在使用 blueimp 画廊轮播，并希望设置标题元素的样式，以便某些字词是粗体或不同的颜色，甚至是链接。我设法找到了一个代码 sn-p，它允许我将图像本身变成一个链接，但这并不是我所追求的。

这可能吗？

JS：

document.getElementById('links').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);
};
$(document).ready(function() {

    //BlueImp Carousel
    document.getElementById('links').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').getElementsByTagName('a'), {
            container: '#blueimp-gallery-carousel',
            carousel: true,
            thumbnailIndicators: false,
            transitionSpeed: 400,
            slideshowInterval: 5000,
            clearSlides: true,
            titleElement: 'h3',
            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>";
            }

        }
    );

});

相关 HTML：

<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel karussell">
    <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">&lt;</a>
        <a class="next">&gt;</a>
</div>
<div id="links">
    <a href="link.html" data-link="img.jpg" title="title1">
    </a>
    <a href="link2.html" data-link="img2.jpg" title="title2">
    </a>
</div>

如果它是 HTML，我希望它看起来如何的澄清示例：

<div><img src="carousel of moving images"></div>
<div>Title text <a href="link">with links </a> and <strong>styles</strong>. (moving according to the image)</div>

【问题讨论】：

标签： javascript carousel image-gallery blueimp

【解决方案1】：

我通过改变实现了这个结果 blueimp-gallery.js 第 960 行从此：

titleElement[0].appendChild(document.createTextNode(text))

到这里：

(titleElement[0]).innerHTML = text

虽然还不确定是否有任何缺点，但显然不想编辑主要源代码。

【讨论】：