Javascript 我想创建一个flickr图库,当我点击图片时,会弹出一个带有图片及其标签、标题、照片id的窗口
早上好,我正在用js和html创建一个flickr API,我搜索照片并用html显示它,但我需要当我点击一张照片时,它会出现在弹出窗口中,带有它的描述、标签、标题、照片id 这是我的代码:Javascript 我想创建一个flickr图库,当我点击图片时,会弹出一个带有图片及其标签、标题、照片id的窗口,javascript,html,flickr,Javascript,Html,Flickr,早上好,我正在用js和html创建一个flickr API,我搜索照片并用html显示它,但我需要当我点击一张照片时,它会出现在弹出窗口中,带有它的描述、标签、标题、照片id 这是我的代码: <html> <head> <title>Creating your first app with Flickr API</title> <style type="text/css"> </style> <script src="
<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>
但不起作用不要在弹出窗口中显示照片,也不要显示描述、标题、id和标签
问候并感谢您。您能试试这段代码吗?我曾经让它弹出。根据您的要求应用css
<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>
使用Flickr API创建您的第一个应用程序
#myImg{
边界半径:5px;
光标:指针;
过渡:0.3s;
}
#myImg:悬停{
不透明度:0.7;
}
/*模态(背景)*/
.莫代尔{
显示:无;
/*默认情况下隐藏*/
位置:固定;
/*原地不动*/
z指数:1;
/*坐在上面*/
填充顶部:100px;
/*盒子的位置*/
左:0;
排名:0;
宽度:100%;
/*全宽*/
身高:100%;
/*全高*/
溢出:自动;
/*如果需要,启用滚动*/
背景色:rgb(0,0,0);
/*退色*/
背景色:rgba(0,0,0,0.9);
/*黑色w/不透明度*/
}
/*模态内容(图像)*/
.模态内容{
保证金:自动;
显示:块;
宽度:80%;
最大宽度:700px;
}
/*模态图像字幕*/
#标题{
保证金:自动;
显示:块;
宽度:80%;
最大宽度:700px;
文本对齐:居中;
颜色:#ccc;
填充:10px0;
高度:150像素;
}
/*添加动画*/
.模态内容,
#标题{
-webkit动画名称:缩放;
-webkit动画持续时间:0.6s;
动画名称:缩放;
动画持续时间:0.6s;
}
@-webkit关键帧缩放{
从{
-webkit变换:缩放(0)
}
到{
-webkit转换:缩放(1)
}
}
@关键帧缩放{
从{
变换:缩放(0)
}
到{
变换:缩放(1)
}
}
/*关闭按钮*/
.结束{
位置:绝对位置;
顶部:15px;
右:35px;
颜色:#f1f1;
字体大小:40px;
字体大小:粗体;
过渡:0.3s;
}
.关闭:悬停,
.结束:聚焦{
颜色:#bbb;
文字装饰:无;
光标:指针;
}
/*较小屏幕上的100%图像宽度*/
@仅介质屏幕和(最大宽度:700px){
.模态内容{
宽度:100%;
}
}
函数obtenerFotos(文本){
阿皮乌尔变种;
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,函数(json){
$.each(json.photos.photo,函数(i,myresult){
var url='1〕https://farm“+myresult.farm+”.staticflickr.com/“+myresult.server+”/“+myresult.id+”\u'+myresult.secret+”\u b.jpg';
$('元素,用于关闭模式
var span=document.getElementsByClassName(“关闭”)[0];
//当用户单击(x)时,关闭模式对话框
span.onclick=函数(){
modal.style.display=“无”;
}
$(“img”)。单击(函数(){
modal.style.display=“块”;
modalImg.src=this.src;
captionText.innerHTML=this.alt;
});
});
});
};
客车
&时代;
控制台中有任何错误吗?没有,有任何错误,我用控制台图像和页面编辑帖子。非常感谢,这项工作非常完美,如果我想要更多的描述,我可以更改myresult.title(带有标记的变量)等否?@Juan yes u可以将更多数据添加到alt属性中。它将显示为描述。
<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>