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 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);
}
});
}
As you can see, I've added photoObj.thumbnail:
photoObj.thumbnail = data.sizes.size[2].source;
I declared a global array variable called viewedImages to store the recent viewed images.
let viewedImages = [];
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);
}
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.
This is the JSON response:
{
"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"
}
Something like this:
$(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>
