Добавить фото с flickr.com на вашу страницу
Вы хотите добавить картинки с сайта flickr.com на вашу страницу? И сделать так, чтобы они обновлялись каждый раз, когда загружается или перегружается страница?
Это сделать очень просто. Всё, что вам надо - это сайт (или даже просто HTML страничка). Просто выполняйте шаги, описанные ниже, чтобы узнать, как это сделать.
Шаг 1: создание страницы
Добавьте новую страницу к вашему сайту или просто создайте страницу, если вам не нужен целый сайт. Код страницы будет выглядеть похожим на пример ниже:
<!DOCTYPE html>
<html>
<head>
<title>My new page</title>
</head>
<body></body>
</html>Это самая базовая страница HTML, мы пока ничего туда не добавляли. Конечно, её недостаточно, чтобы создать то, зачем мы здесь, поэтому давайте её для начала сохраним, назвав, например, MyPage.html, и перейдём ко второму шагу.
Шаг 2: подключение библиотеки jQuery
jQuery - это широко известная библиотека JavaScript, которая используется на множестве сайтов. Вы можете скачать её с официального сайта или подключить её, используя адрес CDN. Давайте не будем ничего скачивать и подключим последнюю версию с CDN сайта Google:
<!DOCTYPE html>
<html>
<head>
<title>My new page</title>
</head>
<body></body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</html>Шаг 3: создание элемента для картинок
Теперь создадим элемент DOM, в который будут помещаться загруженные картинки. Добавим элемент div с идентификатором id="images":
<!DOCTYPE html>
<html>
<head>
<title>My new page</title>
</head>
<body>
<div id="images"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</html>Шаг 4: инициализация фотографий flickr
Всё, что осталось сделать - это инициализировать созданный элемент с фотографиями flickr. Это делается с помощью строк с 11 по 25 кода ниже. Поместите этот код после подключения jQuery, поскольку эта библиотека нужна для его правильной работы, используя тэг <script></script>:
<!DOCTYPE html>
<html>
<head>
<title>My new page</title>
</head>
<body>
<div id="images"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
(function() {
var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tagmode: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "![]()
" ).attr( "src", item.media.m ).appendTo( "#images" );
if ( i === 11 ) {
return false;
}
});
});
})();
</script>
</html>Теперь откройте вашу созданную страницу в браузере. Если всё сделано правильно, вы увидите фотографии с flickr на созданной странице, они будут обновляться каждый раз, когда вы перезагружаете страницу: