Couple of questions about fotorama - fotorama

Question

I found your Fotorama gallery script v4.6.4 and it is exactly what I was looking for.
I do have a couple of questions:
How can I move the Caption down so that it is not overlaying the bottom of an image?
I would like it to be completely separate i.e.
Main Image
Caption
Thumbs
Here is an image that shows how the caption is currently obscuring the lower part of the main image, seems worse the smaller the viewport:
Caption Overlaying Image
Currently the caption shows the image title & a download link for the displayed image.
I would like the link to point to the Flickr image page instead of the ability to download it.
My JS script is currently:
<script type="text/javascript">
$(function() {
var AddPhotosToCarousel = function(data) {
var imgs = [];
$.each(data.photoset.photo, function(index, photo) {
// TODO: use flickr.photos.getSizes
caption = photo['title'] +
' <small>(Download)</small>'
imgs.unshift({img: photo['url_m'],
thumb: photo['url_s'],
caption: caption});
});
$('.fotorama').fotorama({
data: imgs,
width: '100%',
maxwidth: '960',
maxheight: '100%',
ratio: '4/3',
nav: 'thumbs',
autoplay: 8000,
keyboard: 'true',
arrows: 'true',
transition: 'crossfade'
});
};
$.getJSON('https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=[API KEY]&photoset_id=[PHOTOSET ID]&format=json&extras=url_s,url_m,url_o&jsoncallback=?', AddPhotosToCarousel);
});
</script>
this forms a URL in the format:
https://farm2.staticflickr.com/1566/[IMAGE ID][SECRET]_o.jpg
but I would like it to form a URL in format:
https://www.flickr.com/photos/[USER]/[PHOTO ID]/in/dateposted-public/
Any help would be appreciated.
Kind regards..,
OK, I found this page:
Jquery JSON Flickr API Returning Photos in a Set
& altered my script to:
<script type="text/javascript">
$(function() {
var AddPhotosToCarousel = function(data) {
var imgs = [];
$.each(data.photoset.photo, function(index, photo) {
var a_href = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + photo.id + "/";
// TODO: use flickr.photos.getSizes
caption = photo['title'] +
' (Open)'
imgs.unshift({img: photo['url_m'],
thumb: photo['url_s'],
caption: caption});
});
$('.fotorama').fotorama({
data: imgs,
width: '100%',
maxwidth: '960',
maxheight: '100%',
ratio: '4/3',
nav: 'thumbs',
autoplay: 8000,
keyboard: 'true',
arrows: 'true',
transition: 'crossfade',
click: 'false'
});
};
$.getJSON('https://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=72157664523293315&api_key=449126625d797cace5a6d5a90532b741&extras=url_s,url_m&jsoncallback=?', AddPhotosToCarousel);
});
</script>
While this does build the direct image link, clicking on this link only advances the slideshow instead of opening the link.
You can see that I also included the click: 'false' option but this has not stopped the issue.
How do I stop the slideshow advancing when clicking the link?
Regards..,
Right, got question 2 sorted, seemed to be an issue with Chrome caching the page.
Script is now:
<script type="text/javascript">
$(function() {
var AddPhotosToCarousel = function(data) {
var imgs = [];
$.each(data.photoset.photo, function(index, photo) {
var a_href = "http://www.flickr.com/photos/1cm69/" + photo.id + "/";
// TODO: use flickr.photos.getSizes
caption = ' <small><a href="' + a_href + '" target=_blank>' + photo['title'] + '</a></small>'
imgs.unshift({img: photo['url_m'],
thumb: photo['url_s'],
caption: caption});
});
$('.fotorama').fotorama({
data: imgs,
width: '100%',
maxwidth: '960',
maxheight: '100%',
ratio: '4/3',
nav: 'thumbs',
autoplay: 8000,
keyboard: 'true',
arrows: 'true',
transition: 'crossfade'
});
};
$.getJSON('https://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=72157664523293315&api_key=449126625d797cace5a6d5a90532b741&extras=url_s,url_m&jsoncallback=?', AddPhotosToCarousel);
});
</script>
& working.
So only one question left, that of the Caption overlaying the bottom of the image.
Regards..,