Add reference to original element to overlay

[PascaleBeier]

By adding a reference to the original image element to the overlay, you could easily integrate a lightbox.

Below is what I did:

        createOverlay: function(instance, direction, $element) {
             // ...
            $overlay.css({
                width: '100%',
                height: instance.settings.height,
                position: 'absolute',
                left: left,
                bottom: bottom,
                display: instance.settings.verticalMiddle ? 'table' : 'inline',
                textAlign: instance.settings.textAlign,
                color: instance.settings.fontColor,
                backgroundColor: $overlayColor
            })
            .prop('sliphoverRef', $element)

And I can resolve that very element:

    $("body").on("click", function (e) {
        if (e.target.nodeName  === "DIV" && e.target.parentNode.className === "sliphover-overlay" && e.target.parentNode.sliphoverRef) {
            $(e.target.parentNode.sliphoverRef).parent().click();
        }
    })

HTML markup would look like this:

<a href="#" class="lightbox">
  <img src="#">
</a>