javascript - 单击大图时图像不会加载

标签 javascript jquery html css modal-dialog

对于我正在做的作业，您需要弹出一个模式弹出窗口以显示更大尺寸的照片，您也可以单击 x 返回。 x 不会为我返回，而且我似乎也无法加载图像。我缺少的代码有什么问题吗？我已经盯着我的代码看了很多年了。我们还必须制作一个缩略图很小的最近查看的页面。无论您单击以放大并以小缩略图形式出现在侧边栏上的任何内容。有谁知道如何做到这一点？我似乎找不到任何关于它的教程:(

$(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 += `<figure data-full="${photos[i].full}"><img src = "${photos[i].file}"><figcaption>${photos[i].title}</figcaption></figure>`;
        }
        $("#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://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;
}

/*
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>
  <meta charset=utf-8>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="./js/main.js"></script>
  <title>Sports Album</title>
</head>

<body>
  <header>
    <h1>Sports Album</h1>
  </header>
  <div class="flex-container">
    <div id="navigation">
      <h2>Categories</h2><br>
      <div id="nav">
        <div id="tennis" class="request"><button>
          <p>Tennis</p>
          <br /></button>
        </div>
        <div id="football" class="request"><button>
          <p>Football</p>
          <br /></button>
        </div>
        <div id="swimming" class="request"><button>
          <p>Swimming</p</button>
          <br />
        </div>
      </div>
    </div>
    <div id="flickrphoto">
      <h2>Welcome to the Sports Album! Click the buttons on the left for sporting photos</h2>
    </div>
    <div id="recenthistory">
      <h3>Recent history</h3>
    </div>
  </div>

  <div class="footer">
    <p>Jasmine</p>
  </div>
  <div id="modal-container">
     <span id="modal-close">&times;</span>
     <img id="modal-content">
     <div id="modal-caption">Caption</div>
  </div>
</body>

</html>

还有什么理由让 flexbox 将照片推到其他两列上？

感谢您的帮助! :)

最佳答案

您忘记了 jQuery 选择器函数中的 #。

将 $('modal-content') 更改为 $('#modal-content')。

为了呈现最近查看的图像，我更新了 getSizes 函数，如下所示:

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

如您所见，我添加了 photoObj.thumbnail:

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

我声明了一个名为 viewedImages 的全局数组变量来存储最近查看的图像。

let viewedImages = [];

我添加了一个名为 showViewedImages() 的新函数来呈现最近查看的图像:

function showViewedImages() {
  var len = viewedImages.length, html = "";
  for (var i = 0; i < len; i++) {
    html += "<li><img src=\"";
    html += viewedImages[i];
    html += "\" /></li>";
  }
  $("#viewedImagesList").html(html);
}

通过 https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&api_key=39417c145483a7fb3ee91c5fe5bc93fe&photo_id=41465072422 URL 方法，您可以获得所需的一切。

这是 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"
}

像这样:

$(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>.
    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 += `<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', '');
        });
      }

      function showViewedImages() {
        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>
  <meta charset=utf-8>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="./js/main.js"></script>
  <title>Sports Album</title>
</head>

<body>
  <header>
    <h1>Sports Album</h1>
  </header>
  <div class="flex-container">
    <div id="navigation">
      <h2>Categories</h2><br>
      <div id="nav">
        <button class="request"><p>Tennis</p></button>
        <button class="request"><p>Football</p></button>
        <button class="request"><p>Swimming</p></button>
      </div>
    </div>
    <div id="flickrphoto">
      <h2>Welcome to the Sports Album! Click the buttons on the left for sporting photos</h2>
    </div>
    <div id="recenthistory">
      <h3>Recent history</h3>
      <ul id="viewedImagesList"></ul>
    </div>
  </div>
  <div class="footer">
    <p>Jasmine</p>
  </div>
  <div id="modal-container">
    <span id="modal-close">&times;</span>
    <img id="modal-content">
    <div id="modal-caption">Caption</div>
  </div>
</body>

</html>

关于javascript - 单击大图时图像不会加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49866753/

上一篇：javascript - 溢出-y : hidden but should enable mouse scrolling

下一篇：html - 使用 "display:inline-block"但我的 DIV 仍出现在新行上

相关文章：

javascript - 克隆 Chrome 音频输出

javascript - 更改选项卡上的输入值

javascript - 当元素滚动到网页上时执行计数器脚本

javascript - Bootstrap 3 carousel lazyload 插件不适用于 jQuery 1.11

javascript - For Loop/Each Loop变量存储和比较(jQuery或Javascript

php - 如何在JQuery中访问php数据？

html - 避免移动版左侧出现白色竖线

javascript - 从 Javascript 调用 Java 方法

javascript - 我怎样才能显示第一个项目，在 angularjs 上切换就绪

javascript - 如何在 CSS 中制作幽灵元素？

©2024 IT工具网  联系我们