Как создать элементы галереи HTML с галереей blueimp?

Question

Я использую blueimp Gallery в приложении Rails. Это отличный плагин!

Я успешно добавил дополнительные элементы галереи, следуя instructions, но теперь я пытаюсь добавить элемент HTML (ссылку).

html в настоящее время отображается как текст. Как создать элементы галереи HTML в галерее blueimp?

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

Мне удалось получить HTML-код в заголовке, используя фрагмент кода из BlueImp. Он переопределяет 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')); 
}; 

выше скрипка показывает, что это работает