如何使用blueimp gallery創建HTML圖庫元素？

Question

我在Rails應用程序中使用blueimp Gallery。它是一個偉大的插件！

我已經成功添加了其他圖庫元素，按照instructions，但現在我試圖添加一個HTML元素（鏈接）。

html當前呈現爲文本。我如何在blueimp gallery中創建HTML圖庫元素？

Answer 1

您可以使用blueimp畫廊的事件（見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); 
}); 

Answer 2

我設法使用BlueImp的代碼片段獲取標題中的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')); 
}; 

以上小提琴顯示了這個工作