如何在HTML页面上使用JQuery从json文件显示图像？

Question

我正在尝试创建一个图库，在该图库中，我在缩略图区域中选择的图像显示在“主区域”上，并且可以通过箭头选择转到背面或下一幅图像。

我有gallery_json.js

{
      "album": {
        "name": "Project's name"
      },
      "photos": [
        {
          "id":"1",
          "image":"img/image_1.jpg",
          "thumb_url":"test_images/thumb_1.jpg",
          "title":"This is a image",
          "date":"May, 2010",
          "location":"Barcelona"
        },{
          "id":"2",
          "image":"img/image_2.jpg",
          "thumb_url":"test_images/thumb_2.jpg",
          "title":"This is image 2",
          "date":"December, 2014",
          "location":"Chile"},
        {...}]}

和Scripts.js

$(document).ready( function(){

$.getJSON('js/gallery.json', function (data) {
    $.each(data.photos, function (i, f) {
        var img = "<li><img id='" + f.id + "' src='" + f.thumb_url + "' alt='" + f.title + "' /></li>";
        $("ul").append(img);
        $("#Thumbnail").click( function(){
            var fullImg = "<li data-full-url='" + f.image +"'></li><li caption='" + f.title + "'></li>";
            $(".mainImage").select(fullImg);
        });
    });
});

$('#prevImg').click( function(){

});

}）;

我找不到在index.html中显示图像的方法

</!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gallery Challenge</title>
        <link href="assets/css/gallery_json.css" rel="stylesheet">
        <link href="assets/css/style.css" rel="stylesheet">
    </head>
    <body>
        <header>
            <h1>Dinamic gallery</h1>
        </header>

        <section id="Main">     
        <div  class="mainImage">

        </div>
        <div class="prevButton">
            <button id="prevImg" class="btnPrev"></button>      
        </div>
        <div class="nextButton">
            <button id="NextImg" class="btnNext"></button>
        </div>          
    </section>
    <section id="Thumbnail" >
        <div id="json-gallery">
            <ul></ul>
        </div>
    </section>


    <!-- JavaScript -->
    <script src="assets/js/gallery_json.js"></script>
    <script src="assets/js/scripts.js"></script>
    </body>
</html>

多谢您的支持。 非常感谢！

Answer 1

除非这是一些旧系统，否则请考虑使用jQuery的替代品，例如Angular 2，React，Vue或任何已实现数据绑定概念的东西。 由于您不使用服务器端生成的HTML，因此对于jQuery这样的框架/库来说，将是一个很好的用例。
不要使用嵌套在<ul>和</ul>标签中的<br />标签。 在这种情况下，仅使用<li>和</li>对。 您将多个<li>标记用于单个列表元素。 最好使用一个带有多个<div>标签的标签来包装URL，标题，日期等。出于间距目的，请使用CSS类或直接引用<li>元素。 类在引用样式范围时更安全。
如果您坚持使用jQuery，则可以使用“ on”事件来处理缩略图单击，例如： $('ul').on('click', 'li', function() { // handle showing big image here }); -请检查文档以获取详细信息。
要在点击事件处理代码中获取完整的图像URL，您可以先将其编写以供以后在<li>标记中使用，例如"<li data-full-url='" + f.image +"'>" 。 它仍然不是那么优雅的解决方案。 第1）点中提到的数据绑定将更干净，并提供更好的层分离。
处理箭头是另一个事件，并且是在JSON中定义的对象数组上的迭代。 您需要所有数据。 “ id”属性可以写为Integer或从String强制转换为它，然后根据需要递增/递减。 边缘案例是指您显示第一个或最后一个元素的情况。 在这种情况下，您可以禁用“上一个” /“下一个”功能，也可以循环到第一个/最后一个元素。 UX选择。

Answer 2

您可以使用第三方库来实现。

http://photoswipe.com/documentation/getting-started.html

如何在HTML页面上使用JQuery从json文件显示图像？

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-03-10 00:44:21

解决方案2
0 2017-03-10 00:57:57

如何在HTML页面上使用JQuery从json文件显示图像？

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-03-10 00:44:21

解决方案2 0 2017-03-10 00:57:57

解决方案1
0 已采纳 2017-03-10 00:44:21

解决方案2
0 2017-03-10 00:57:57