CODEWITHSUNDEEP
jqueryfancybox-2
JulianJ
JulianJ

Reputation: 1313

Display html content inside fancybox?

I am trying to figure out how to display some html content below and open image in fancybox. I've searched around but can only find how to display only html content inside the open window. I'd really appreciate any help. Thanks. I've made a fiddle here

 <a id="single_image" href="http://fancyapps.com/fancybox/demo/1_s.jpg" width="400"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" width="100"></a>

<p>
Place this html content below the open image
</p>

The jquery

$("a#single_image").fancybox();

Upvotes: 0

Views: 6827

Answers (1)

DBS
DBS

Reputation: 9984

I've modified one of the example JSFiddles from their tips and tricks section page to do what I think you're after.

Fancybox has a option to run some JS after the image has been loaded into their layout, we can use this to append your html of choice into the fancybox element.

$("a#single_image").fancybox({
  afterLoad: function() {
    this.outer.append("<div>" + document.getElementById("content").innerHTML + "</div>");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>

<a id="single_image" href="http://fancyapps.com/fancybox/demo/1_s.jpg" width="400"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" width="100"></a>
<p id="content">
  Place this html content below the open image
</p>

Upvotes: 3

Related Questions