Couple of questions about 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>(<a href="' + photo['url_o'] + '">Download</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/?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'] +
                          ' (<a href="' + a_href + '">Open</a>)'
                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..,

This feels like too many individual questions in a single question. — MattD, Mar 24 '16 at 13:47
The title says a couple of questions, basically there were 2. One is now resolved so just the one left. I have edited post to reflect. Thank you — 1cm69, Mar 24 '16 at 13:50
Pretty sure the general preference is for one question at a time. — MattD, Mar 24 '16 at 13:51

Couple of questions about fotorama

0 Answers0