Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery / Modal Dialog

Image Wont Load When Clicked For Larger Image

Post a Comment
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

Solution 1:

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():

functionshowViewedImages() {
  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>.letAPI_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. 
    });

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

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

      functiondisplay(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', '');
        });
      }

      functionshowViewedImages() {
        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><metacharset=utf-8><linkrel="stylesheet"type="text/css"href="css/style.css"><scriptsrc="https://code.jquery.com/jquery-3.3.1.min.js"></script><scriptsrc="./js/main.js"></script><title>Sports Album</title></head><body><header><h1>Sports Album</h1></header><divclass="flex-container"><divid="navigation"><h2>Categories</h2><br><divid="nav"><buttonclass="request"><p>Tennis</p></button><buttonclass="request"><p>Football</p></button><buttonclass="request"><p>Swimming</p></button></div></div><divid="flickrphoto"><h2>Welcome to the Sports Album! Click the buttons on the left for sporting photos</h2></div><divid="recenthistory"><h3>Recent history</h3><ulid="viewedImagesList"></ul></div></div><divclass="footer"><p>Jasmine</p></div><divid="modal-container"><spanid="modal-close">&times;</span><imgid="modal-content"><divid="modal-caption">Caption</div></div></body></html>

Post a Comment for "Image Wont Load When Clicked For Larger Image"