单击放大图像将不会加载图像 [英] Image wont load when clicked for larger image
本文介绍了单击放大图像将不会加载图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于我正在做的作业，您需要弹出一个模态弹出窗口，以显示更大尺寸的照片，也可以单击x返回. x不会替我返回，我也似乎无法加载图像.我缺少的代码有什么问题吗?我已经盯着我的代码好多年了.另外，我们还必须制作一个最近浏览的页面，其中的缩略图很小.您单击的任何内容都会放大并显示在侧栏中的小缩略图中.有人知道如何执行此操作吗?我似乎找不到关于它的任何教程:(
For the assignment I'm doing, you need to get a modal pop out to have larger sizes of the photo appear and you can also click the x to go back. The x wont go back for me and I also can't seem to load the images. Is there anything wrong with my code that I'm missing? I've been staring at my code for ages now. Also we have to make a recently viewed page where the thumbnails are small. Whatever ones you click to enlarge and to appear on the side bar in little thumbnails. Does anyone have any clue how to do this? I can't seem to find any tutorials on it :(
$(function() {
$(".request").on("click", function() {
let searchText = $(this).children().text();
let API_KEY = "MY API KEY";
let tennisStr = "https://api.flickr.com/services/rest/?method=flickr.photos.search&tags=" + searchText + "&per_page=15&format=json&nojsoncallback=1&api_key=" + API_KEY;
let photos = [];
let nrequest;
let nreceived;
$.get(tennisStr, function(data) {
fetchPhoto(data);
});
function fetchPhoto(data) {
nrequest = data.photos.photo.length;
nreceived = 0;
for (let i = 0; i < data.photos.photo.length; i++) {
let photoObj = {
id: data.photos.photo[i].id,
title: data.photos.photo[i].title
}
photos.push(photoObj);
getSizes(photoObj);
}
function getSizes(photoObj) {
let getSizesStr = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=" + API_KEY + "&photo_id=" + photoObj.id;
$.get(getSizesStr, function(data) {
nreceived++;
photoObj.file = data.sizes.size[3].source;
photoObj.full = data.sizes.size[data.sizes.size.length - 1].source;
if (nreceived == nrequest) {
display(photos);
}
});
}
function display(photos) {
let htmlStr = "";
for (let i = 0; i < photos.length; i++) {
htmlStr += `<figure data-full="${photos[i].full}"><img src = "${photos[i].file}"><figcaption>${photos[i].title}</figcaption></figure>`;
}
$("#flickrphoto").html(htmlStr);
$('figure').each(function (index){
$(this).click(function(){
$('#modal-container').css('display', 'block');
$('modal-content').attr('src', $(this).attr('data-full'));
});
});
$("#modal-close").click(function(){
$('#modal-container').css('display', 'block');
$('#modal-content').attr('src', '');
});
};
};
});
});
.flex-container {
display: flex;
}
.flex-container>div {
border: 1px solid black;
}
#navigation {
flex-grow: 2;
text-align: left;
}
#flickrphoto {
display: flex;
flex-grow: 2;
text-align: center;
flex-wrap: wrap;
justify-content: center;
flex-basis: auto;
}
#recenthistory {
flex-grow: 2;
text-align: center;
}
#modal-container{
padding-top: 50px;
display: none;
position: fixed;
left:0;
top:0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 1;
}
#modal-content{
width: 60%;
height: 60%;
margin: auto;
display: block;
}
#modal-caption{
color: white;
text-align: center;
}
#modal-close{
position: absolute;
top: 15px;
right: 30px;
color: white;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
header {
text-align: center;
background-image: url("http://getwallpapers.com/wallpaper/full/5/4/9/684187.jpg");
color: white;
padding: 4rem;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
/*
THREE COL
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
TWO COL
@media only screen and (min-width: 768px) {
body {
background-color: lightblue;
}
}
ONE COL
@media only screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
*\
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./js/main.js"></script>
<title>Sports Album</title>
</head>
<body>
<header>
<h1>Sports Album</h1>
</header>
<div class="flex-container">
<div id="navigation">
<h2>Categories</h2><br>
<div id="nav">
<div id="tennis" class="request"><button>
<p>Tennis</p>
<br /></button>
</div>
<div id="football" class="request"><button>
<p>Football</p>
<br /></button>
</div>
<div id="swimming" class="request"><button>
<p>Swimming</p</button>
<br />
</div>
</div>
</div>
<div id="flickrphoto">
<h2>Welcome to the Sports Album! Click the buttons on the left for sporting photos</h2>
</div>
<div id="recenthistory">
<h3>Recent history</h3>
</div>
</div>
<div class="footer">
<p>Jasmine</p>
</div>
<div id="modal-container">
<span id="modal-close">×</span>
<img id="modal-content">
<div id="modal-caption">Caption</div>
</div>
</body>
</html>
Flexbox是否也有理由将照片推到其他两列上?
Also is there any reason that flexbox would push the photos over the other two columns?
感谢您的帮助！ :)
推荐答案
您忘记了jQuery选择器功能中的#.
You forgot the # in the jQuery selector function.
将$('modal-content')更改为$('#modal-content').
为了渲染最近观看的图像，我更新了getSizes函数，如下所示:
In order to render the recent viewed images I've updated the getSizes function like this:
function getSizes(photoObj) {
let getSizesStr = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=" + API_KEY + "&photo_id=" + photoObj.id;
$.get(getSizesStr, function(data) {
nreceived++;
photoObj.thumbnail = data.sizes.size[2].source; // "label": "Thumbnail",
photoObj.file = data.sizes.size[3].source; // "label": "Small",
photoObj.full = data.sizes.size[data.sizes.size.length - 1].source; // "label": "Original",
if (nreceived == nrequest) {
display(photos);
}
});
}
如您所见，我添加了photoObj.thumbnail:
photoObj.thumbnail = data.sizes.size[2].source;
我声明了一个名为viewedImages的全局数组变量，用于存储最近查看的图像.
I declared a global array variable called viewedImages to store the recent viewed images.
let viewedImages = [];
我添加了一个新功能来渲染最近查看的图像，称为showViewedImages():
I've added a new function to render the recent viewed images called showViewedImages():
function showViewedImages() {
var len = viewedImages.length, html = "";
for (var i = 0; i < len; i++) {
html += "<li><img src=\"";
html += viewedImages[i];
html += "\" /></li>";
}
$("#viewedImagesList").html(html);
}
通过https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=39417c145483a7fb3ee91c5fe5bc93fe&photo_id=41465072422 URL方法，您将获得所需的一切.
Throug the https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=39417c145483a7fb3ee91c5fe5bc93fe&photo_id=41465072422 URL method you get all you need.
这是JSON响应:
{
"sizes": {
"canblog": 0,
"canprint": 0,
"candownload": 1,
"size": [
{
"label": "Square",
"width": 75,
"height": 75,
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_76cb19bf81_s.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/sq\/",
"media": "photo"
},
{
"label": "Large Square",
"width": "150",
"height": "150",
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_76cb19bf81_q.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/q\/",
"media": "photo"
},
{
"label": "Thumbnail",
"width": "100",
"height": "67",
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_76cb19bf81_t.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/t\/",
"media": "photo"
},
{
"label": "Small",
"width": "240",
"height": "160",
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_76cb19bf81_m.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/s\/",
"media": "photo"
},
{
"label": "Small 320",
"width": "320",
"height": 213,
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_76cb19bf81_n.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/n\/",
"media": "photo"
},
{
"label": "Medium",
"width": "500",
"height": "333",
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_76cb19bf81.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/m\/",
"media": "photo"
},
{
"label": "Medium 640",
"width": "640",
"height": "427",
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_76cb19bf81_z.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/z\/",
"media": "photo"
},
{
"label": "Medium 800",
"width": "800",
"height": 534,
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_76cb19bf81_c.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/c\/",
"media": "photo"
},
{
"label": "Large",
"width": "1024",
"height": "683",
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_76cb19bf81_b.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/l\/",
"media": "photo"
},
{
"label": "Large 1600",
"width": "1600",
"height": 1067,
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_3971a09b92_h.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/h\/",
"media": "photo"
},
{
"label": "Large 2048",
"width": "2048",
"height": 1365,
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_f71da7999c_k.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/k\/",
"media": "photo"
},
{
"label": "Original",
"width": "3000",
"height": "2000",
"source": "https:\/\/farm1.staticflickr.com\/890\/41465072422_08af9d42ac_o.jpg",
"url": "https:\/\/www.flickr.com\/photos\/54097044@N03\/41465072422\/sizes\/o\/",
"media": "photo"
}
]
},
"stat": "ok"
}
类似这样的东西:
$(function() {
$(".request").on("click", function() {
let searchText = $(this).children().text(); // Once you've clicked on a single button with the class "request" you get its children text content. In this case <p> tag has a text content: "Tennis": <button><p>Tennis</p></button>.
let API_KEY = "39417c145483a7fb3ee91c5fe5bc93fe"; // My API key only test purposes for this question.
let tennisStr = "https://api.flickr.com/services/rest/?method=flickr.photos.search&tags=" + searchText + "&per_page=15&format=json&nojsoncallback=1&api_key=" + API_KEY;
let photos = [];
let nrequest;
let nreceived;
let viewedImages = []; // Array variable to store the recent image thumbnail URL.
$.get(tennisStr, function(data) { // jQuery.get() method wich runs $.ajax() function with GET request type by default.
fetchPhoto(data); // Inside the anonymous function call the fetchPhoto function with the current data from the API url requested.
});
function fetchPhoto(data) {
nrequest = data.photos.photo.length; // Gets the length of the "data.photos.photo" array.
nreceived = 0; // Initialization with 0.
for (let i = 0; i < data.photos.photo.length; i++) {
let photoObj = { // In this section you're declaration "photoObj" for every iteration.
id: data.photos.photo[i].id,
title: data.photos.photo[i].title
}
photos.push(photoObj);
getSizes(photoObj);
}
function getSizes(photoObj) {
let getSizesStr = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=" + API_KEY + "&photo_id=" + photoObj.id;
$.get(getSizesStr, function(data) {
nreceived++;
photoObj.thumbnail = data.sizes.size[2].source; // "label": "Thumbnail",
photoObj.file = data.sizes.size[3].source; // "label": "Small",
photoObj.full = data.sizes.size[data.sizes.size.length - 1].source; // "label": "Original",
if (nreceived == nrequest) {
display(photos);
}
});
}
function display(photos) {
let htmlStr = "";
for (let i = 0; i < photos.length; i++) {
htmlStr += `<figure data-full="${photos[i].full}" data-thumbnail="${photos[i].thumbnail}"><img src = "${photos[i].file}"><figcaption>${photos[i].title}</figcaption></figure>`;
}
$("#flickrphoto").html(htmlStr);
$('figure').each(function(index) {
$(this).click(function() {
viewedImages.push($(this).attr('data-thumbnail')); // We're adding the thumbnail URL value to the viewedImages array.
$('#modal-container').css('display', 'block');
$('#modal-content').attr('src', $(this).attr('data-full'));
});
});
$("#modal-close").click(function() {
showViewedImages(); // Call the showViewedImages function to render a list <ul><li><img src="" /></li></ul> with the "photoObj.thumbnail" content.
$('#modal-container').css('display', 'none');
$('#modal-content').attr('src', '');
});
}
function showViewedImages() {
var len = viewedImages.length, html = "";
for (var i = 0; i < len; i++) {
html += "<li><img src=\"";
html += viewedImages[i];
html += "\" /></li>";
}
$("#viewedImagesList").html(html); // Finally, insert the html value to the "viewedImagesList" element. <ul id="viewedImagesList"></ul>
}
}
});
});
.flex-container {
display: flex;
}
.flex-container>div {
border: 1px solid black;
}
#navigation {
flex-grow: 2;
text-align: left;
}
#flickrphoto {
display: flex;
flex-grow: 2;
text-align: center;
flex-wrap: wrap;
justify-content: center;
flex-basis: auto;
}
#recenthistory {
flex-grow: 2;
text-align: center;
}
#modal-container {
padding-top: 50px;
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 1;
}
#modal-content {
width: 60%;
height: 60%;
margin: auto;
display: block;
}
#modal-caption {
color: white;
text-align: center;
}
#modal-close {
position: absolute;
top: 15px;
right: 30px;
color: white;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
header {
text-align: center;
background-image: url("http://getwallpapers.com/wallpaper/full/5/4/9/684187.jpg");
color: white;
padding: 4rem;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
.request {
display: block;
}
/*
THREE COL
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
TWO COL
@media only screen and (min-width: 768px) {
body {
background-color: lightblue;
}
}
ONE COL
@media only screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
*\
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./js/main.js"></script>
<title>Sports Album</title>
</head>
<body>
<header>
<h1>Sports Album</h1>
</header>
<div class="flex-container">
<div id="navigation">
<h2>Categories</h2><br>
<div id="nav">
<button class="request"><p>Tennis</p></button>
<button class="request"><p>Football</p></button>
<button class="request"><p>Swimming</p></button>
</div>
</div>
<div id="flickrphoto">
<h2>Welcome to the Sports Album! Click the buttons on the left for sporting photos</h2>
</div>
<div id="recenthistory">
<h3>Recent history</h3>
<ul id="viewedImagesList"></ul>
</div>
</div>
<div class="footer">
<p>Jasmine</p>
</div>
<div id="modal-container">
<span id="modal-close">×</span>
<img id="modal-content">
<div id="modal-caption">Caption</div>
</div>
</body>
</html>
这篇关于单击放大图像将不会加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
