Question

我找到了你的Fotorama图库脚本v4.6.4，这正是我想要的。

我有几个问题：

如何将标题向下移动，使其不会覆盖图像的底部？我希望它完全分开，即主要形象字幕拇指

这是一张图片，显示了标题当前是如何遮盖主图像的下半部分，视口越小看起来越糟糕：

目前，标题显示图片标题＆amp;显示图像的下载链接。我想链接指向Flickr图像页面而不是下载它。

我的JS脚本目前是：

<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>

这将形成以下格式的URL：

https://farm2.staticflickr.com/1566/[IMAGE ID][SECRET]_o.jpg

但我希望它以格式形成一个URL：

https://www.flickr.com/photos/[USER]/[PHOTO ID]/in/dateposted-public/

任何帮助都将不胜感激。

亲切的问候..，

好的，我找到了这个页面：

Jquery JSON Flickr API Returning Photos in a Set

＆安培;将我的脚本改为：

<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>

虽然这确实构建了直接图像链接，但单击此链接只会推进幻灯片显示而不是打开链接。您可以看到我还包含了click: 'false'选项，但这并未解决此问题。单击链接时如何停止幻灯片显示？

问候...，

是的，问题2排序，似乎是Chrome缓存页面的问题。

脚本现在是：

<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>

＆安培;工作

所以只留下一个问题，即标题覆盖图像的底部。

问候...，

关于fotorama的几个问题

0 个答案: