JSFiddle - React, Tailwind, and code Playground

by Snj

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></script>
<button id="append">append</button>

JavaScript

var IMGSRCs = ["https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg", "https://c2.staticflickr.com/6/5499/30972532232_e9a298a0c5_m.jpg"];

var srcElems = IMGSRCs.map(value => ({'src': value}))
var srcElems = IMGSRCs.map(value => ({'src': value, 'caption': '<a href="' + value + '">' + value.substring(value.lastIndexOf('/')+1) + '</a><i class="fitted filter icon inbubble" title="Filter image"><a href="' + value + '"></a></i>'}))
srcElems.unshift({'src': 'http://media-2.web.britannica.com/eb-media/67/114967-004-E3A58022.jpg', 'caption': 'Add caption here!'})

$('#append').click(function(){
  $.fancybox.open(srcElems, {
    fullScreen : {
      requestOnStart : false
    },
    hash  : false,
    toolbar : true,
    infobar : true,
    autoCenter: true,
    wheel : 'auto',
    afterShow : function(instance, current) {
      var caption = instance.$refs.caption[0].innerText
      console.log(savedCap)
  	},

  })
});





//instance.$refs.caption