<div class="modal fade" id="modal-gallery" tabindex="-1" role="dialog" aria-hidden="true" style="height: 100%;">
	<div class="modal-dialog" role="document" style="width: 98%; height: 92%; padding: 0;">
		<div class="modal-content" style="height: 100%; border-radius: 0;">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body" style="height: 90%;">
			</div>
		</div>
	</div>
</div>

<script>

function handle_gallery(gallery, carousel, selector) {
	/* activate the carousel */
	$(carousel).carousel({interval:false});

	/* change modal title when slide changes */
	$(carousel).on('slid.bs.carousel', function () {
	  $('.modal-title').html($(this).find('.active').attr("title"));
	});

	/* when clicking a thumbnail */
	$(selector + ' .item').click(function(){
		var idx = $(this).data('index');
		var id = parseInt(idx);
		// alert(id);
		$(gallery).modal('show'); // show the modal
		$(carousel).carousel(id); // slide carousel to selected
	});
}


</script>