CODEWITHSUNDEEP
jqueryfancyboxfancybox-3
rubendn
rubendn

Reputation: 205

Adding a button/image below the image

I'm currently using fancybox3 to zoom in on images.

It currently looks like this: Currently

I would like to be able to add a button/image below the image like this:Desired

Is there an option in fancybox3 to do this or would I have to modify the source code. You can see it at canescollector.com.

Thanks!

Upvotes: 0

Views: 325

Answers (1)

Janis
Janis

Reputation: 8769

It is possible using callbacks. The only problem is that caption can be on top of the image, one solution would be to push content up. Demo - https://codepen.io/anon/pen/mKbwJK

JS:

$('[data-fancybox]').fancybox({
  idleTime: 0,
  afterShow: function(instance, current) {
    current.$content.append('<p class="fancybox-extra"><button>Click me</button></p>');
  }
});

CSS:

.fancybox-extra {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
  padding: 10px;
}

/* Hide while zooming */
.fancybox-is-scaling .fancybox-extra {
  display: none;
}

/* Push content up */
.fancybox-slide--image {
  padding-bottom: 120px;
}

Upvotes: 1

Related Questions