Я нашел ваш скрипт галереи Fotorama v4.6.4, и это именно то, что я искал.
У меня есть пара вопросов:
- Как я могу переместить заголовок вниз, чтобы он не перекрывал нижнюю часть изображения? Я хотел бы, чтобы он был полностью отдельным, т.е. большим пальцем подписи к основному изображению.
Вот изображение, которое показывает, как заголовок в настоящее время закрывает нижнюю часть основного изображения, чем меньше окно просмотра, тем хуже:
Наложение подписи на изображение
- В настоящее время подпись показывает название изображения и ссылку для скачивания отображаемого изображения. Я бы хотел, чтобы ссылка указывала на страницу изображения 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>
& работающий.
Так что остался только один вопрос: о подписи, накладывающейся на нижнюю часть изображения.
С Уважением..,