Question

我有一个API链接（https://jsonplaceholder.typicode.com/photos），其中包含相册ID，图像ID和每个图像的URL。

我需要一个代码，其中根据每个相册显示图像，并且当我单击某个相册时，仅会显示那些图像？

我已成功显示所有图像。现在它需要每个专辑的标题并相应显示。

图像应显示为引导程序。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Bootstrap Photo Gallery Demo</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    </script>
    <script>
      $(document).ready(function(){
        $('ul.first').bsPhotoGallery({
          "classes" : "col-xl-6 col-lg-2 col-md-4 col-sm-4",
          "hasModal" : true,
          "shortText" : false  
        });
      });
    </script>
    <script>
$.getJSON('https://jsonplaceholder.typicode.com/photos', function(data) {
     var html="<ul class='row first'>";
     $.each(data, function (index, value) {
       var subhtml="<li><img alt="+value.albumId+" src="+value.url+"><p>"+value.title+"</p></li>";
       html=html+subhtml;

       // $(".albums").append('<div class="album" id="'+value.albumId+'">' + value.thumbnailUrl+'</div>');

});
   $(".albums").append(html+"</ul>");
   $('ul.first').bsPhotoGallery({
          "classes" : "col-xl-6 col-lg-2 col-md-4 col-sm-4",
          "hasModal" : true,
          "shortText" : false  
        });
});
</script>
 <link href="http://demo.michaelsoriano.com/bootstrap-gallery/master/dist/jquery.bsPhotoGallery-min.css" rel="stylesheet">
    <script src="http://demo.michaelsoriano.com/bootstrap-gallery/master/dist/jquery.bsPhotoGallery-min.js"></script>   
  </head>
  <style>
      /**************STYLES ONLY FOR DEMO PAGE**************/
      @import url(https://fonts.googleapis.com/css?family=Bree+Serif);
      body {
        background:#ebebeb;
      }   
  </style>
  <body>
    <!--<div class="container">-->
       <div class="albums"></div>
    </div> <!-- /container -->
  </body>
</html>

如何使用html jQuery

0 个答案: