I have been struggling on how to add a static linkable image as the last slide at the end of a slideshow before it loops back to the beginning. Any help is greatly appreciated.
<#assign photoIndex = 0>
<#assign albums = listingElementDetail.getAlbums('${urlPrefix}')>
<#if (albums)?has_content>
<div id="cont-gallery">
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel">
<div class="slides"></div>
<a class="prev"><h4 class="icon-chevron-left" style="top: -8px; position: relative;"></h4></a>
<a class="next"><h4 class="icon-chevron-right" style="top: -8px; position: relative;"></h4></a>
<ol class="indicator"></ol><div class="indicator-container"></div>
</div>
<div id="links" style="display:none;">
<#if (albums)?has_content>
<#list albums as album>
<#list album.photos as photo>
<a href="" title="${listingPropertyStreet!}, ${City!} ${StateName!}">
<img width="48" height="33" src="" alt="${Street!}, ${City!} ${StateName!}" />
</a>
<#assign photoIndex=photoIndex+1>
</#list>
</#list>
</#if>
</div>
<script src="<@resource.url '/static/lib/Gallery-2_15_2/js/blueimp-gallery.min.js'/>"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
stretchImages: "cover",
startSlideshow: false,
onslide: function (index, slide) {
var thumbWidth = jQuery("#blueimp-gallery-carousel .indicator li").first().outerWidth(true);
var thumbContMargin = parseInt(jQuery("#blueimp-gallery-carousel .indicator").css("margin-left"));
var slideWidth = $j(slide).width();
var numThumbs = $j('#blueimp-gallery-carousel .indicator li').length;
var thumbContainerWidth = ((numThumbs) * thumbWidth) + (thumbWidth);
jQuery("#blueimp-gallery-carousel .indicator").width(thumbContainerWidth);
var currentThumb = $j('#blueimp-gallery-carousel .indicator li')[index];
var currentThumbOffset = $j(currentThumb).position().left + (thumbWidth);
if( thumbContainerWidth > slideWidth){
if( currentThumbOffset > (slideWidth/2) ){
var offsetLeft = Math.min((currentThumbOffset - slideWidth/2), (thumbContainerWidth - slideWidth + (thumbContMargin/2)));
} else {
offsetLeft = 0;
}
jQuery("#blueimp-gallery-carousel .indicator").animate({"left":"-" +offsetLeft + "px"}, 200);
} else {
jQuery("#blueimp-gallery-carousel .indicator").animate({"left":"-40px"}, 200);
}
}
}
);
</script>
</div>
</#if>