A imagem não carrega quando clicada para uma imagem maior

Para a tarefa que estou fazendo, você precisa obter um pop modal para ter tamanhos maiores da foto e também pode clicar no x para voltar. O x não vai voltar para mim e eu também não consigo carregar as imagens. Há algo de errado com o meu código que está faltando? Eu tenho olhado para o meu código há muito tempo. Também temos que fazer uma página visualizada recentemente, onde as miniaturas são pequenas. Qualquer um que você clique para ampliar e para aparecer na barra lateral em miniaturas pequenas. Alguém tem alguma idéia de como fazer isso? Eu não consigo encontrar nenhum tutorial sobre isso 🙁

$(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 += `
${photos[i].title}
`; } $("#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://sofpt.miximages.com/javascript/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; } } *\ 
        Sports Album   

Sports Album

Welcome to the Sports Album! Click the buttons on the left for sporting photos

Recent history

Também existe alguma razão para o flexbox empurrar as fotos sobre as outras duas colunas?

Obrigado pela ajuda! 🙂

Você esqueceu o # na function do seletor jQuery.

Altere $('modal-content') para $('#modal-content') .


Para renderizar as imagens visualizadas recentemente atualizei a function getSizes assim:

 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); } }); } 

Como você pode ver, adicionei photoObj.thumbnail :

 photoObj.thumbnail = data.sizes.size[2].source; 

Eu declarei uma variável de matriz global chamada viewedImages para armazenar as imagens visualizadas recentemente.

 let viewedImages = []; 

Eu adicionei uma nova function para renderizar as imagens visualizadas recentemente chamadas showViewedImages() :

 function showViewedImages() { var len = viewedImages.length, html = ""; for (var i = 0; i < len; i++) { html += "
  • "; } $("#viewedImagesList").html(html); }

    Através do método de https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=39417c145483a7fb3ee91c5fe5bc93fe&photo_id=41465072422 URL, obtém tudo o que precisa.

    Esta é a resposta do 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" } 

    Algo assim:

     $(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 

    tag has a text content: "Tennis": . 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 += `

    ${photos[i].title}
    `; } $("#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
    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 += "
  • "; } $("#viewedImagesList").html(html); // Finally, insert the html value to the "viewedImagesList" element.
      } } }); });

       .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; } } *\ 
              Sports Album   

      Sports Album

      Welcome to the Sports Album! Click the buttons on the left for sporting photos

      Recent history