JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<a href="javascript:;" class="newItem">add new item</a><br /><br />
<div id="cal-wrapper"></div>

CSS

#cal-wrapper {
min-height: 200px;
    background-color: #e2e2ee;
}

JavaScript

var newItem = '<a class="event_link" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg" ><img src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg" alt=""/></a>';
var i = 0;

$(document).ready(function() {
    // add item dynamically
    $(".newItem").on("click", function() {
        $(newItem).appendTo("#cal-wrapper");
    });
    // open fancybox on mouseover
    $('div#cal-wrapper').on("mouseover", "a.event_link", function() {
        $("a.event_link").fancybox().trigger("click");
    });
});