用户点击时显示图像？答案

【问题标题】：Displaying images when user clicks?用户点击时显示图像？
【发布时间】：2017-10-06 11:36:19
【问题描述】：

我创建了一个模型，用于在用户单击图像时查看图像。问题是当我尝试从模态内容中的图库图像访问图像时，它不起作用。仅显示一个空白弹出窗口。我希望显示图片库中的图片。

我需要知道我可以使用哪些代码来访问模态内容中的图库图像。

<body>

<script type="text/javascript">
    var gallery = [
        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

    ]
    function view(imgsrc) {
        vieww = 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 + '")" data-toggle="modal" data-
         target="#myModal" alt="Forest" width="600" height="400" /';
            output += ' </a>';
            output += ' <div class="desc">' + gallery[i].text + '</div>';
            output += '</div>';
        }
        document.getElementById('output').innerHTML = output;
    }
    window.onload = function () {
        RenderHtml();
    }
     </script>
    <div id="output">

    </div>
     <!-- Modal -->
     <div class="modal fade" id="myModal" role="dialog">
     <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;
          </button>

          <h4 class="modal-title">Modal Header</h4>

        </div>
        <div class="modal-body">
                <!-- I want images from gallery array to be shown here when 
          user clicks on any of the images -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-
                dismiss="modal">Close</button>
             </div>
            </div>

          </div>
        </div>
        </body>

       </html>

【问题讨论】：

我们可以得到你当前代码的 sn-p 吗？哪个有助于我们更好地理解？

标签： javascript html css modal-dialog shopify

【解决方案1】：

您好 this link 可以帮助您。只需更改此 (window.open (imgsrc, 'viewwin', 'width = 600, height = 300'))，因为引导程序是一个很好的解决方案 :))

【讨论】：

我是 javascript/jquery 新手，所以我不太了解。
但是我应该在文件中的哪里添加html代码？
我按照你说的做了，但是没有用。然后我尝试将引导代码添加到文件中，仍然没有工作。

【解决方案2】：

     <div id="output">
     </div>


    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">              
          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <img src="" class="imagepreview" style="width: 100%;" >
          </div>
        </div>
      </div>
    </div>

<script>

var gallery = [ 
        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        } //, ....
    ] 

    function RenderHtml() {
        var output = "";
        for (i = 0; i < gallery.length; ++i) { 
          output += '<a  href="#" class="pop">'+
            '<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px;                                      height: 264px;">'+
                '</a>';  
        } 
        document.getElementById('output').innerHTML = output;
    } 

    $( document ).ready(function() {
   RenderHtml(); 

   $('.pop').on( "click", function() {
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');   

});
});
</script>

【讨论】：

没问题的兄弟。