Question

我正在尝试创建一个库，其中我在缩略图区域中选择的图像显示在＆＃34;主区域＆＃34;并且可以通过箭头选项转到后面或下一个图像。

我有 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上这种框架/库的一个很好的用例。
请勿使用嵌套在<br />和<ul>标记中的</ul>标记。在此上下文中仅使用<li>和</li>对。您正在为单个列表元素使用多个<li>标记。最好使用内置多个<div>标记的单个标记来包装URL，标题，日期等。对于间距目的，请使用CSS类或直接引用<li>元素。关于样式范围，类更安全。
如果您坚持使用jQuery，您可以使用“on”事件来处理缩略图点击，例如：$('ul').on('click', 'li', function() { // handle showing big image here }); - 请查看文档以获取详细信息。
要在点击事件处理代码中获取完整图片网址，您可以先将其编写，以便稍后在<li>标记"<li data-full-url='" + f.image +"'>"中使用。它仍然没有那么优雅的解决方案。第1点中提到的数据绑定会更干净，并且可以提供更好的层分离。
处理箭头是JSON中定义的对象数组的另一个事件和迭代。您需要所有数据。 “id”属性可以写为Integer或从String转换为它，然后根据需要递增/递减。边缘情况是指您显示第一个或最后一个元素。您可以在这种情况下禁用“上一个”/“下一个”功能，也可以循环到第一个/最后一个元素。用户体验选择。

Answer 2

您可以使用第三方库来实现这一目标。

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

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

2 个答案: