点击从外部API拍摄的照片后显示模态

Question

我已经创建了一个页面，使用其API在unsplash.com数据库中搜索照片。我现在想做的是创建一个模式，在点击特定的照片后，会出现一个模式，显示它的描述、作者和更高分辨率的版本。我怎样才能实现它？我知道如何制作一个模态，但我不知道如何将其附加到从外部API中获取的内容上。

$(document).ready(function () {



  $(".searchButton").click(function () {
    event.preventDefault()

    var searchQuery = $(".inputField").val();
    var client_id = "FfYp1ZB8b1n8B14J8FDCBqGL8RxKFNOHi1JmHU-WBWI"

    $.ajax({
      url: 'https://api.unsplash.com/search/photos',
      dataType: 'json',
      type: 'GET',
      data: { query: searchQuery, client_id: client_id, per_page: 40 },

      success: function (data) {

        $(".foundPhotos").empty();

        data.results.forEach(photo => {
          $('.foundPhotos').append(` 
          <img class="image" title="Author:${photo.user.name} | ${photo.alt_description}" src="${photo.urls.small}"/>    
          `)
        });
      }
    })
  });
});

Answer 1

这是一个伪代码......例如......在图片上添加调用函数。

例如......在图片上添加调用函数

<img src='./xyz.jpg' onlclick='show_photo_data('image_id_of_unsplash')'>

现在创建一个方法，它将接受unplash的图片id，这样你就可以得到同一图片的细节，一旦你得到unplash的响应，包括描述，作者和更高的内容。

在模式中的例子。

<div class='modal-body'>
<div id='image_disc'></div>
<div id='image_author'></div>
</div>

在jquery中

success: function (data) {
$(#image_author).html(photo.user.name});
}

Answer 2

这里是给你的工作代码。它加载的图像和数据，你需要在模态。

工作演示。https:/jsfiddle.netusmanmuniry8tsg5dc36。

超文本标记语言

<button class="searchButton">Search</button>

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <section class="modal-card-body">

            <div id="name"></div>
                        <div id="description"></div>
      <img id="haha" width="200px" height="200" alt=""/>
    </section>
  </div>
</div>

jQuery

$(document).ready(function () {

  $(".searchButton").click(function () {
    event.preventDefault()

    var searchQuery = 'eyFKAj8LwKg';
    var client_id = "FfYp1ZB8b1n8B14J8FDCBqGL8RxKFNOHi1JmHU-WBWI"

    $.ajax({
      url: 'https://api.unsplash.com/photos/random',
      dataType: 'json',
      type: 'GET',
      data: { client_id: client_id, per_page: 40 },
      success: function (data) {
        $('.modal').addClass('is-active')
        $('#name').html('Author: '+data.user.first_name+' '+data.user.last_name)
        $('#description').html('Description: '+data.alt_description)
        $("#haha").attr("src", data.urls.small);
      }
    })
  });
});