jquery - image gallery from json file

Question

I've tried everything I could to get this to work.

I have to display thumbnail versions of the images in the returned JSON asynchronously. Then display the full size version of the image. Finally, I have to cache them by ID.

My current work:

$.getJSON('https://jsonplaceholder.typicode.com/photos',
  function(data) {
    $.each(data, function(i, f) {
      $("ul").append('<li id=\"#imageGallery\"><a id=\"imager\" href="' + f.url + '"><img src="' + f.thumbnailUrl + '" alt="' + f.title + '"></a></li>');
    });
    $overlay = $('#overlay');
    $image = $("#fullSize");
    $('#imageGallery img').on('click', function(e) {
      // the image clicked 
      e.preventDefault();
      $imageLocation = $(this).parent().attr("href");
      // get the parent of this which is the a href
      $image.attr("src", $imageLocation).replace("http://", "https://");
      //post URL into new image
      $overlay.show();
    })
  });

body {
  font-family: sans-serif;
  background: #384047;
}

h1 {
  color: #fff;
  text-align: center
}

ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: block;
  max-width: 780px;
  text-align: center;
}

ul li {
  display: inline-block;
  padding: 8px;
  background: white;
  margin: 10px;
}

ul li img {
  display: block;
}

a {
  text-decoration: none;
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
}

#overlay img {
  margin-top: 10%;
}

#overlay p {
  color: #fff;
  font-weight: 700;
  font-family: 'Comfortaa'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>

<ul>

</ul>
<div id="overlay">
  <img id="fullSize" />
</div>

Any help? See what I'm missing? The console simply gives me a Mixed Content error. "Mixed Content: The page at 'https://----' was loaded over HTTPS, but requested an insecure resource 'http://xxxx'. This request has been blocked; the content must be served over HTTPS."

Also, I was able to do something similar here: https://codepen.io/rsolomonjr1/pen/zqwYrd

But can't get all the pieces together for this request.

PS: a look at a bit of the JSON

{
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
  },

Answer 1

man, you are insanely manipulating the DOM.

here I fixed the problems and tried to comment it line by line

$.getJSON('https://jsonplaceholder.typicode.com/photos',
  function(data) {
    //prepare variables to be used later 
    var $list = $('<ul>', {
      class: 'image-list'
    });
    var $overlay = $('#overlay');
    var $image = $("#fullSize");
    
    //build/construct the gallery 
    $(data).each(function(i, photoObject) {
      // this is a temp solution, you should ensure that 
      // all your content is served from either http or https
      photoObject.thumbnailUrl = photoObject.thumbnailUrl.replace('http://', 'https://');
      photoObject.url = photoObject.url.replace('http://', 'https://');
			
      //appened to the newly created list, don't manipulate the DOM yet
      // also you were using id="#imageGallery" for each image
      // note that ids has to be unique in the DOM tree
      $list.append('<li class="imageGallery"><a href="' + photoObject.url + '"><img data-fullimage="'+photoObject.url+'" src="' + photoObject.thumbnailUrl + '" alt="' + photoObject.title + '"></a></li>');
    });

    // manipulate the DOM one time only, not 5000 times
    $('body').prepend($list)
    
    // don't attach event listener to each image, instead,
    // attach the event to the parent .imageGallery div and run
    // your logic if the clicked element is an image which is 
    // inside this .imageGallery div.
    
    
    $('.imageGallery').on('click', 'img', function(e) {
      // the image clicked 
      
      // I am on it, don't propagate it more
      e.preventDefault();
      
      // get the full-size url from the image data attribute
      $imageLocation = $(this).data('fullimage');

      // change the single full-size image src attr
      $image.attr("src", $imageLocation)

      // finally, show the overlay
      $overlay.show();
    });
    
    // BOUNCE: close the overlay
    $overlay.on('click', function(e){
       e.preventDefault();
       $image.attr('src', '');
       $overlay.hide();
    });
  });

body {
  font-family: sans-serif;
  background: #384047;
}

h1 {
  color: #fff;
  text-align: center
}

ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: block;
  max-width: 780px;
  text-align: center;
}

ul li {
  display: inline-block;
  padding: 8px;
  background: white;
  margin: 10px;
}

ul li img {
  display: block;
}

a {
  text-decoration: none;
}

#overlay {
  padding: 100px;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
}

#overlay img {
  margin-top: 10%;
}

#overlay p {
  color: #fff;
  font-weight: 700;
  font-family: 'Comfortaa'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
  <img id="fullSize" />
</div>

Answer 2

$image.attr("src", $imageLocation).replace("http://", "https://");

Here you set $image's src attribute to your original HTTP $imageLocation, then call replace on the returned jQuery object. Do the replacement either as you call $image.attr,

$image.attr("src", $imageLocation.replace("http://", "https://"));

or immediately upon processing your JSON data.

$("ul").append(`
  <li id="#imageGallery">
    <a id="imager" href="${f.url.replace("http://", "https://")}">
      <img src="${f.thumbnailUrl.replace("http://", "https://")}" alt="${f.title}">
    </a>
  </li>
`);

Also, you're assigning multiple <li> elements an id of #imageGallery, which is against spec. Give the <ul> a class of imageGallery instead.

Answer 3

Mixed Content

because your website is loading over https but images url inside json are not