{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 干净又极端 的问题《Image wont load when clicked for larger image》','https://www.manongdao.com/q-1040135.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>Also is there any reason that flexbox would push the photos over the other two columns?
Thanks for your help! :)
You forgot the
#in the jQuery selector function.Change
$('modal-content')to$('#modal-content').In order to render the recent viewed images I've updated the
getSizesfunction like this:As you can see, I've added
photoObj.thumbnail:I declared a global array variable called
viewedImagesto store the recent viewed images.I've added a new function to render the recent viewed images called
showViewedImages():Throug the
https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=39417c145483a7fb3ee91c5fe5bc93fe&photo_id=41465072422URL method you get all you need.This is the JSON response:
Something like this: