Tengo una aplicacion en MVC, en donde una noticia puede tener mas de una imagen. Lo que quiero es que al hacer clic en la imagen esta se amplie a la pantalla como un modal. Encontre un script y me funciona pero unicamente para la primera imagen, el resto no. Les muestro mi codigo, porque como soy nuevo en frontend no entiendo bien que pasa
Vista:
<div class="row text-center text-lg-left">
@for (int i = 1; i <= 5; i++)
{
switch (i)
{
case 1:
if (Model.Imagenes.Imagen1 != null)
{
<div class="col-md-2 offset-md-1">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target="#exampleModalCenter">
<img id="myImg" class="img-fluid img-thumbnail modall" src="@Url.Content(Model.Imagenes.Imagen1)" alt="">
</a>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
}
break;
case 2:
if (Model.Imagenes.Imagen2 != null)
{
<div class="col-md-2 offset-md-1">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target="#exampleModalCenter">
<img id="myImg" class="img-fluid img-thumbnail modall" src="@Url.Content(Model.Imagenes.Imagen2)" alt="">
</a>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
}
</div>
Y el script:
@section Scripts{
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
</script>
}
Alguien me podria explicar porque funciona con la primera imagen y no el resto? Muchas gracias.