ユーザーが画像をクリックしたときにポップアップを作成する方法は？

Question

私はShopifyでウェブサイトを開発しています。クリック可能な画像ギャラリーを作成する方法を知っておく必要があります。ユーザーがギャラリー内の画像をクリックすると、説明と画像を含むポップアップが表示されます。

これまでのところ、私はギャラリーで作業を終えました。私が知る必要があるのは、ポップアップ画面でギャラリーをクリック可能にする方法だけです。

 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

あなたはブートストラップからモーダルを使用することができます画像や多くの情報を示す場合：

はここでギャラリー-data.js.liquidファイルのコードです。イベント（画像をクリック）で、情報をモーダルに入れる必要があります。

W3School Modal Bootstrap