Responsive Photo Gallery using lightbox
<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>