ruby-on-rails - 如何使用 blueimp 画廊创建 HTML 画廊元素？

Question

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

我已按照说明成功添加了其他画廊元素，但现在我正在尝试添加 HTML 元素（链接）。

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

Answer 1

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

http://jsfiddle.net/j8U9K/5/

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

上面的小提琴显示了这个工作

Answer 2

您可以使用 blueimp 画廊事件（请参阅文档）

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

在 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">‹&lt;/a>
    <a class="next">›&lt;/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);
});