jquery - 来自json文件的图片库

Question

我已经尽了一切努力让它发挥作用。

我必须异步显示返回的JSON中的图像的缩略图版本。然后显示图像的完整大小版本。最后，我必须通过ID缓存它们。

我目前的工作：

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

有帮助吗？看看我错过了什么？控制台只是给我一个混合内容错误。 “混合内容：'https://----'页面是通过HTTPS加载的，但请求了一个不安全的资源'http://xxxx'。此请求已被阻止;内容必须通过HTTPS提供。”

此外，我能够在这里做类似的事情：https://codepen.io/rsolomonjr1/pen/zqwYrd

但无法为此请求获得所有碎片。

PS：看一下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

伙计，你疯狂地操纵DOM。

在这里我修复了问题并尝试逐行评论

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

混合内容

因为您的网站是通过https加载的，但json中的图片网址不是

Answer 3

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

在这里，您将$image的src属性设置为原始HTTP $imageLocation，然后在返回的jQuery对象上调用replace。当你打电话给$image.attr做替换时，

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

或者在处理您的JSON数据后立即执行。

$("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>
`);

此外，您正在为<li>分配多个#imageGallery元素，这是违反规范的。给<ul>一类imageGallery。