La imagen no se carga cuando se hace clic para obtener una imagen más grande

Para la tarea que estoy haciendo, necesitas obtener un pop-hop modal para que aparezcan tamaños más grandes de la foto y también puedes hacer clic en la x para volver. La x no volverá para mí y tampoco puedo cargar las imágenes. ¿Hay algo de malo en mi código que me falta? He estado mirando mi código por edades ahora. También tenemos que hacer una página vista recientemente donde las miniaturas son pequeñas. Cualquiera que sea el que haga clic para agrandar y aparecer en la barra lateral en pequeñas miniaturas. ¿Alguien tiene alguna pista de cómo hacer esto? Parece que no puedo encontrar ningún tutorial sobre esto 🙁

$(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://sofes.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

¿También hay alguna razón por la que Flexbox empuje las fotos sobre las otras dos columnas?

¡Gracias por tu ayuda! 🙂

Olvidó el # en la función del selector jQuery.

Cambie $('modal-content') a $('#modal-content') .


Para renderizar las imágenes vistas recientemente, he actualizado la función getSizes la getSizes manera:

 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 puede ver, he agregado photoObj.thumbnail :

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

viewedImages una variable de matriz global llamada viewedImages para almacenar las imágenes vistas recientemente.

 let viewedImages = []; 

He agregado una nueva función para representar las imágenes vistas recientemente llamadas showViewedImages() :

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

    A través del https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=39417c145483a7fb3ee91c5fe5bc93fe&photo_id=41465072422 método de URL obtienes todo lo que necesitas.

    Esta es la respuesta 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 como esto:

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