Question

我在Shopify上开发了一个网站。我需要知道如何创建可点击的图库。当用户单击图库中的任何图像时，将显示包含说明和图像的弹出窗口。

到目前为止，我已经完成了图库，我唯一需要知道的是如何通过弹出屏幕使图库可点击。

这是gallery-data.js.liquid文件的代码：

        var gallery = [         
        {
          "img": "{{ 'Square_102.jpg' | file_img_url: "x270" }}",
            "text": "Gulvmontert",
        },
       {
          "img": "{{ 'Bille-_-Jo.png'| file_img_url: "x270"}}",
            "text": "Bille og Jo",
        },{
          "img": "{{ 'Square_015.jpg'| file_img_url: "x270"}}",
            "text": "Inspirasjon ",
        },{
          "img": "{{ 'Square_102.jpg'| file_img_url: "x270"}}",
            "text": "Veggmontert",
        },{
          "img": "{{ 'Square_015.jpg'| file_img_url: "x270"}}",
            "text": "Square",
        },{
          "img": "{{ 'Square_069.jpg'| file_img_url: "x270"}}",
            "text": "Veggmontert",
        },{
          "img": "{{ 'Square_102.jpg'| file_img_url: "x270"}}",
            "text": "Veggmontert",
        },{
          "img": "{{ 'Square_102.jpg'| file_img_url: "x270"}}",
            "text": "Veggmontert",
        },

    ];

     Here's the code for the gallery.js.liquid file: 

    function view(imgsrc) {
        viewwin = window.open(imgsrc, 'viewwin', 'width=600,height=300');
    }

    function RenderHtml() {
        var output = "";
        for (i = 0; i < gallery.length; ++i) {
            output += '<div class="gallery"><a target="_blank" rel="noopener 
            noreferrer">';
            output += ' <a target="_blank" rel="noopener noreferrer">';
            output += '     <img src="' + gallery[i].img + '" 
         onclick="view("' + gallery[i].img + '")" alt="Forest" /';
            output += ' </a>';
          //  output += ' <div class="desc">' + gallery[i].text + '</div>';
            output += '</div>';
        }
        document.getElementById('output').innerHTML = output;
    }
    window.onload = function () {
        RenderHtml();
    }

Answer 1

要显示图像和更多信息，您可以使用Bootstrap中的模态。通过事件（单击图像），您可以获得信息应该在模态中的信息。

W3School Modal Bootstrap

如何在用户点击任何图片时创建弹出窗口？

1 个答案: