Question

我在Rails应用中使用blueimp Gallery。它是一个很棒的插件！

我已按照instructions成功添加了其他图库元素，但现在我正在尝试添加HTML元素（链接）。

html当前呈现为文本。如何在blueimp gallery中创建HTML库元素？

Answer 1

我设法使用BlueImp的代码片段在标题中获取HTML。它会覆盖setTitle以使用html。

blueimp.Gallery.prototype.setTitle = function (index) {
var obj = $(this.list[index]);
this.titleElement.html(obj.data('title-html'));
};

以上小提琴显示了这个工作

Answer 2

您可以使用blueimp gallery事件（请参阅Documentation）

我在这里添加了“下载链接”：

在HTML中：

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <p class="download"></p> <!-- This is my custom tag -->
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

在CSS中：

.blueimp-gallery > .close, .blueimp-gallery > .download {
    color: #FFFFFF;
    font-size: 20px;
    left: 15px;
    line-height: 30px;
    margin: 0 40px 0 0;
    opacity: 0.8;
    position: absolute;
    text-shadow: 0 0 2px #000000;
    top: 50px;
}

在JS中：

$('#blueimp-gallery').on('slide', function(event, index, slide) {
    var href = $('.slide[data-index=' + index + '] .slide-content').attr('src');
    var $a = $('<a />', { href:href, text:'Download'});
    $('.download').html($a);
});

如何使用blueimp gallery创建HTML gallery元素？

2 个答案: