0

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">&times;</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.

2

1 respuesta 1

0

Este trozo de código solo lo pones al case 1: tienes que agregarlo en todos los "case" para que te funcione en las 5 imágenes:

                            <div id="myModal" class="modal">
                                <span class="close">&times;</span>
                                <img class="modal-content" id="img01">
                                <div id="caption"></div>
                            </div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.