Responsive Photo Gallery using lightbox

responsivePhotoGallery.vm

<script type="text/javascript" src="//share.uakron.edu/global/includes/js/vendor/lightbox/js/lightbox.min.js"></script>
<div class="row">
<div class="col-sm-12">
#if($UtilMethods.isSet($galleryTitle))
<h1 class="gallery-title">$galleryTitle</h1>
#end
#set($indexFolder = "$photosPath")
#set ($images = $photoTool.getPhotoGalleryFolderImages($indexFolder ,$host))
	#if($singular.equals('false'))
	#foreach($item in $sorter.sort($images, "modDate:desc"))
		<div class="thumbnail-holder">
		  <a href="/contentAsset/image/$item.identifier/fileAsset/filter/Resize/resize_w/650"data-lightbox="$galleryId" data-title="${item.friendlyName}"><img src="/contentAsset/image/$item.identifier/fileAsset/filter/Resize/resize_w/150" class="lightbox-thumbnail">
		</a>
		</div>
	#end​​
#elseif($singular.equals('true'))
	#foreach($item in $images)
		<div class="thumbnail-holder" #if($velocityCount.equals(1))style="display: block" #else style="display: none;" #end>
		  <a href="/contentAsset/image/$item.identifier/fileAsset/filter/Resize/resize_w/650" data-lightbox="$galleryId" data-title="${item.friendlyName}"><img src="/contentAsset/image/$item.identifier/fileAsset/filter/Resize/resize_w/150"  class="lightbox-thumbnail">
		</a>
		</div>
	#end
#end
</div>
</div>
<script type="text/javascript" src="//share.uakron.edu/global/includes/js/vendor/lightbox/js/lightbox.min.js"></script>
<script type="text/javascript">
        function addCSS() {
            var headtg = document.getElementsByTagName('head')[0];
            if (!headtg) {
                return;
            }
            var linktg = document.createElement('link');
            linktg.type = 'text/css';
            linktg.rel = 'stylesheet';
            linktg.href = '//share.uakron.edu/global/includes/js/vendor/lightbox/css/lightbox.css';
            linktg.title = 'lightbox2';
            headtg.appendChild(linktg);
        }

jQuery(document).ready(function() {
addCSS();
});
</script>