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

我正在尝试创建一个画廊，其中我在缩略图区域中选择的图像显示在“主要区域”上，并且可以通过箭头选项进入后面或下一张图像。如何在HTML页面上使用JQuery在json文件中显示图像？

我有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>

我会感谢您的支持方式。非常感谢！

来源

2017-03-09 Yeinny Garzón

到目前为止，您已经有了一个显示大拇指代码，而这一切，是否正确？您可能需要将点击事件监听器添加到缩略图中，然后编码以在页面中显示图像 - 图像显示元素应该有可以点击的区域来浏览下一页/上一页 –

'UL'只接受'LI'，而不接受'
' - 要小心你的愿望。另外，是的，你的''在哪里？ –

你还在javascript和jquery中工作吗？ – Aravind

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

来源

2017-03-10 00:44:21 HybridLizard

感谢您@HybridLizard的建议。如果你看到了，我改变了scripts.js，即使我还没有应用click事件。我陷入了这个问题：/ –

请阅读jQuery文档以获得'click'和'on'事件之间的区别。我建议您阅读更多文档，例如[link]（https://developer.mozilla.org）可以是一个好的开始。也可以在选择该库时研究jQuery文档。一定要先了解一些原生的HTML，CSS，JS。先掌握基本素材。做一些教程。然后你可以回到这个。如果您仍然有麻烦，请询问更具体的问题。这里没有必要重写几乎整个“小部件”。根据需要和偏好，可以使用该教程或即可使用的插件。祝你好运。 – HybridLizard

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

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

来源

2017-03-10 00:57:57

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

回答

相关问题