After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gallery to show up correctly.
I am looking for guidance on which code snippet can help me access the gallery image inside the modal content.
<body>
<script type="text/javascript">
var gallery = [
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},
*other image objects go here*
]
function view(imgsrc) {
vieww = window.open(imgsrc, 'viewwin', 'width=600,height=300');
}
function RenderHtml() {
var output = "";
for (i = 0; i < gallery.length; ++i) {
*image gallery HTML structure goes here*
}
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">×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<!-- Display images from the gallery array 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>