ユーザーがクリックすると画像が表示されますか？

私は、ユーザーが画像をクリックしたときに画像を見るためのモデルを作成しました。問題は、動作しないモーダルコンテンツ内のギャラリー画像から画像にアクセスしようとするときです。空白のポップアップだけが表示されます。画像ギャラリーの画像を表示したい。ユーザーがクリックすると画像が表示されますか？

私は、モーダルコンテンツ内のギャラリー画像にアクセスするために使用できるコードを知る必要があります。

<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

本当にありがとう！ –

問題はありません。 –

ユーザーがクリックすると画像が表示されますか？

答えて

関連する問題