<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
<meta charset="utf-8">
<title>Kitten Mania!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<h1>Kitten Mania!</h1>
<h3>Amorevoli tesorini!</h3>
<p id="timestamp"></p>
<!--- Pulsante utilizzato per i test -->
<!--button id="bottone1" onclick="getFlickerImg()">Mostra Galleria</button-->
<div id="images">
<!--- Questo si può togliere, è lasciato solo come modello -->
<div class="gallery">
<img src='https://communibee.ca/wp-content/uploads/2019/07/600x400-placeholder.png' alt="600x400" width="600" height="400">
<div class="desc">
<a href="#">Add a description of the image here</a>
</div>
</div>
</div>
<script>
function jsonFlickrFeed(json) {
$('#images').empty();
$("#timestamp").html("Ultimo controllo: "+new Date());
$.each(json.items, function(i, item) {
let link =$("<a />", {href : item.link, text : item.title});
$("<div class='gallery'>")
.append(
$("<img />").attr("src", item.media.m)
)
.append(
$("<div class='desc'>").append(link)
).appendTo("#images")
});
};
<!-- Prima versione della funzione, usata come test di funzionamento -->
function jsonFlickrFeedTest(json) {
$('#images').empty();
$.each(json.items, function(i, item) {
$("<img />").attr("src", item.media.m).appendTo("#images");
});
};
function getFlickerImg () {
$.ajax({
url: 'https://api.flickr.com/services/feeds/photos_public.gne',
dataType: 'jsonp',
data: { "tags": "kittens", "format": "json" }
});
}
$( document ).ready(function() {
getFlickerImg () ;
setInterval(getFlickerImg,10000);
});
</script>
</body>
</html>
Comments