Page´s photo Good morning, i am triying to create a flickr API with js and html, i search photos and shows it in a html, but i need when i click on a photo this appears in pop-up with it description, tags, tittle, photo-id.
That is my code:
<html>
<head>
<title>Creating your first app with Flickr API</title>
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
function obtenerFotos(text) {
var apiurl;
apiurl = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f0b84fba1c00631410b85b90720f52ba&text="+text+"&per_page=10&format=json&nojsoncallback=1";
$.getJSON(apiurl,function(json){
$.each(json.photos.photo,function(i,myresult){
var url = 'https://farm' + myresult.farm + ".staticflickr.com/" + myresult.server + '/' + myresult.id + '_' + myresult.secret + '_b.jpg';
$('<img/>').attr("src", url).appendTo("#results").wrap("<div class=\"slide\"><h3>"+ myresult.title + url +"</h3><a href='" + myresult.link + "'></a></div>");
$('img').click(function () { //al hacer click en una miniatura ampliamos la imagen
$('#imga').attr("src", $(this).attr('src'));
$('#fondo').fadeIn();
});
});
});
$('#fondo').click(function () { //si clickeamos de nuevo volvemos a la pantalla principal
$('#fondo').fadeOut();
});
};
</script>
</head>
<body>
<div id="left_sidebar" class="container"></div>
<input type="text" name="a" placeholder="Inserte su texto aqui" id="a">
<button type="button" onclick="obtenerFotos(document.getElementById('a').value)">Buscar</button>
<div class="wraper" id="results"></div>
<div id="fondo">
<div><img src="" id="imga"/>
</div>
</div>
</body>
</html>
The part that show the photo is that:
$('img').click(function () { //al hacer click en una miniatura ampliamos la imagen
$('#imga').attr("src", $(this).attr('src'));
$('#fondo').fadeIn();
});
But doesn´t work dont show the photo in pop up and dont show description, title, id, tags.
Regards and thank you.
Can you try this code? i used this to make it popup. Apply css according to your requirement.
<html>
<head>
<title>Creating your first app with Flickr API</title>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
function obtenerFotos(text) {
var apiurl;
apiurl = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f0b84fba1c00631410b85b90720f52ba&text=" + text + "&per_page=10&format=json&nojsoncallback=1";
$.getJSON(apiurl, function (json) {
$.each(json.photos.photo, function (i, myresult) {
var url = 'https://farm' + myresult.farm + ".staticflickr.com/" + myresult.server + '/' + myresult.id + '_' + myresult.secret + '_b.jpg';
$('<img>').attr("src", url).width("400").attr("alt",myresult.title).appendTo("#imageList");
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
//var img = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
$("img").click(function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
});
});
});
};
</script>
</head>
<body>
<div id="left_sidebar" class="container"></div>
<input type="text" name="a" placeholder="Inserte su texto aqui" id="a">
<button type="button" onclick="obtenerFotos(document.getElementById('a').value)">Buscar</button>
<div id="imageList">
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</body>
</html>