Пара вопросов по фотораме

Я нашел ваш скрипт галереи Fotorama v4.6.4, и это именно то, что я искал.

У меня есть пара вопросов:

  1. Как я могу переместить заголовок вниз, чтобы он не перекрывал нижнюю часть изображения? Я хотел бы, чтобы он был полностью отдельным, т.е. большим пальцем подписи к основному изображению.

Вот изображение, которое показывает, как заголовок в настоящее время закрывает нижнюю часть основного изображения, чем меньше окно просмотра, тем хуже:

Наложение подписи на изображение

  1. В настоящее время подпись показывает название изображения и ссылку для скачивания отображаемого изображения. Я бы хотел, чтобы ссылка указывала на страницу изображения 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, возвращающий фотографии в наборе

& изменил мой скрипт на:

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

& работающий.

Так что остался только один вопрос: о подписи, накладывающейся на нижнюю часть изображения.

С Уважением..,


person 1cm69    schedule 24.03.2016    source источник
comment
Это похоже на слишком много отдельных вопросов в одном вопросе.   -  person MattD    schedule 24.03.2016
comment
Заголовок говорит о паре вопросов, в основном их было 2. Один сейчас решен, так что остался только один. Я отредактировал сообщение, чтобы отразить. Спасибо   -  person 1cm69    schedule 24.03.2016
comment
Почти уверен, что общее предпочтение - по одному вопросу за раз.   -  person MattD    schedule 24.03.2016
comment
Смотри ответ на комментарий выше   -  person 1cm69    schedule 24.03.2016