Tengo una vista en MVC, a la que le llegan cinco imagenes. Para mostrarlas en el inicio, lo hago de esta manera:
@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">
<a href="#" class="d-block mb-4 h-100">
<img id="myImg" class="img-fluid img-thumbnail modall" src="@Url.Content(Model.Imagenes.Imagen2)" alt="">
</a>
</div>
}
break;
case 3:
if (Model.Imagenes.Imagen3 != null)
{
<div class="col-md-2">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="@Url.Content(Model.Imagenes.Imagen3)" alt="">
</a>
</div>
}
break;
case 4:
if (Model.Imagenes.Imagen4 != null)
{
<div class="col-md-2">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="@Url.Content(Model.Imagenes.Imagen4)" alt="">
</a>
</div>
}
break;
case 5:
if (Model.Imagenes.Imagen5 != null)
{
<div class="col-md-2">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="@Url.Content(Model.Imagenes.Imagen5)" alt="">
</a>
</div>
}
break;
default:
break;
}
}
Lo que quisiera, es que al hacerle clic, se agranden con JS, pero soy nuevo en frontend y me esta costando, logre que se agrande una cuando le hago clic, pero las otras no se agrandan cuando les hago clic a cada una de ellas. Alguien me podria mostrar como hacer un script para que esto pueda hacerse?. Gracias.