How to to add div to the fancybox-3 custom template?

Question

I am trying to achieve result similar to one in the picture above:

With fancybox-3 plugin I have created custom template:

$('[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>',
});

and partly I have managed to achieve result similar to one in the picture below:

After all, I am missing divs with text below image. I have tried to use codepen example as reference but without any decent results :/

Does anyone know where I am missing the point? Many thanks for all possible help.

Looking forward,

score 0 · Answer 1 · answered Sep 22 '17 at 06:52

0

You can archive more or less the same design and layout using CSS only, see this demo - 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;
}

answered Sep 22 '17 at 06:52

Janis

8,593
1
21
27

many thanks for your answer. Could you say if using `data-caption="text"` is the only way to add text to light box? Text below image should be like gallery description and won't change depending on current image. – o.O Sep 22 '17 at 07:10
Seems that `baseTpl :` forbids to play around with `caption` . Do you know if it is possible to find and append div from HTML to the `baseTpl :`; something similar to `+'
' + content + '
'+` ? – o.O Sep 25 '17 at 05:54
I do not understand your question, but 90% percent of questions about fancyBox can be answered simply by - "just use callbacks" – Janis Sep 25 '17 at 16:17

score 0 · Accepted Answer · answered Sep 26 '17 at 11:11

Seems it is possible to add additional content to fancybox via data-attributes;

Firstly, wrap content with data- attribute in html:

<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>

Secondly, with jQuery find and add text into variable in fancybox options using afterLoad: function() {}. Variable could be inserted with .html into <div>...</div> inside fancybox template

 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);
}

How to to add div to the fancybox-3 custom template?

2 Answers2