用戶點擊時顯示圖像？

我創建了一個模型，用於在用戶單擊圖像時查看圖像。問題是當我嘗試從模式內容中的圖庫圖像訪問圖像時，它不起作用。只顯示一個空白彈出窗口。我想要顯示來自圖庫的圖片。用戶點擊時顯示圖像？

我需要知道哪些代碼可以用來訪問模態內容中的圖庫圖像。

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

來源

2017-10-06 tor daniel

我們可以有你的當前代碼的片段？這將有助於我們更好地理解？ –

嗨this link幫助you.Just改變這種（window.open (imgsrc, 'viewwin', 'width = 600, height = 300'）），因爲引導是這個:)一個很好的解決方案）

來源

2017-10-06 12:10:42

已經嘗試過，但不起作用。 –

我是新來的javascript/jquery，所以我不知道很多。 –

jsfiddle例子很容易鏈接到你的代碼相同 –

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

來源

2017-10-06 16:28:21

非常感謝你的男人！ –

兄弟沒問題。 –

用戶點擊時顯示圖像？

回答

相關問題