lightcase demo

custom caption

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightcase/2.3.4/css/lightcase.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightcase/2.3.4/js/lightcase.min.js"></script>
<div class="grid-item">
    <a href="http://i.imgur.com/oPR4BiX.jpg" data-rel="lightcase:collection">
		<img src="http://i.imgur.com/oPR4BiX.jpg">
	</a>
   
</div>
<div class="grid-item">
    <a href="http://i.imgur.com/oPR4BiX.jpg" data-rel="lightcase:collection">
		<img src="http://i.imgur.com/oPR4BiX.jpg">
	</a>
   
</div>

CSS

div, p { margin: 0; padding: 0}

.grid-item { display: inline-block; font-family: sans-serif; border: 1px solid #808080; margin-right: 10px; }

.grid-item img { max-width: 150px; height: auto; }

.caption {
	display: none; /* hide caption by default */
	color: #fff;   
	position: relative;
}

JavaScript

jQuery(document).ready(function($) {
  $('a[data-rel^=lightcase]').lightcase({
        onFinish : {
            custom: function() {
                var caption = $(this).find('.caption');
                if (caption.length) {
                    lightcase.get('caption').html(caption.html());
                    $('#lightcase-caption').show();
                } 
                lightcase.resize();
            }
        }
    });
});