[英]How to add html to blueimp gallery title element
我正在使用 blueimp gallery carousel 並希望設置標題元素的樣式,以便某些單詞是粗體或不同的顏色,甚至是鏈接。 我設法找到了一個代碼片段,它允許我將圖像本身轉換為鏈接,但這並不是我所追求的。
這可能嗎?
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"><</a>
<a class="next">></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>
我通過更改blueimp-gallery.js
第 960 行來實現此結果:
titleElement[0].appendChild(document.createTextNode(text))
對此:
(titleElement[0]).innerHTML = text
不確定是否有任何缺點,但顯然不想編輯主要源代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.