![](/img/trans.png)
[英]How to insert .fancybox-thumbs into .fancybox-inner using fancybox-3 plugin?
[英]How to to add div to the fancybox-3 custom template?
我試圖獲得類似於上圖中的結果:
使用fancybox-3插件,我創建了自定義模板:
$('[data-fancybox="gallery"]').fancybox({
fullScreen : false,
slideShow : false,
autoSize : false,
loop:true,
touch : {
vertical : false,
horizontal : false
},
thumbs : {
autoStart : true
},
onThumbsShow : function(instance, current) {
instance.Thumbs.$grid.appendTo( instance.$refs.inner );
},
clickOutside : 'close',
baseTpl :
'<div class="fancybox-container qv-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<button data-fancybox-prev title="{{PREV}}" class="fancybox-arrow fancybox-arrow--left" />' +
'<button data-fancybox-next title="{{NEXT}}" class="fancybox-arrow fancybox-arrow--right" />' +
'<button data-fancybox-close class="qv-close"></button>' +
'<div data-fancybox-close class="qv-close"></div>' +
'<div></div>' +
'</div>' +
'</div>',
});
部分我已設法取得類似於下圖中的結果:
畢竟,我錯過了圖像下面的文本div。 我曾嘗試使用codepen示例作為參考但沒有任何不錯的結果:/
有誰知道我錯過了哪一點? 非常感謝所有可能的幫助。
期待,
您可以使用CSS存檔或多或少相同的設計和布局,請參閱此演示 - https://codepen.io/anon/pen/qPaNwo
.fancybox-bg {
background: #fff;
}
.fancybox-stage {
top: 44px;
left: 200px;
right: 320px;
bottom: 100px;
}
.fancybox-inner {
right: 0 !important;
}
.fancybox-thumbs {
top: 44px;
right: 200px;
bottom: 44px;
width: 120px;
background: transparent;
}
.fancybox-thumbs>ul>li {
max-width: 100%;
}
.fancybox-caption-wrap {
padding: 0 200px;
background: transparent;
}
.fancybox-caption {
padding: 0;
border: 0;
color: #000;
}
似乎可以通過data-attributes
向fancybox添加其他內容;
首先,用html中的data-
屬性包裝內容:
<a href="images/img.jpg" class="gallery-img" data-content="lorem ipsum bla bla bla" data-fancybox="images" style="background-image: url('images/img.jpg')"></a>
其次,使用afterLoad: function() {}
,jQuery在fancybox選項中查找並添加文本到變量中。 變量可以用.html
插入到fancybox模板里面的<div>...</div>
baseTpl :
'<div class="fancybox-container qv-container" role="dialog" tabindex="-1">' +
....
'<div class="fancybox-div"></div>'+
....
'</div>',
afterLoad: function() {
var content = $(this.opts.$orig[0]).data('content');
$(".fancybox-div").html(content);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.