0

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

5
  • 2
    al parecer todas las imagenes tienen el mismo identificador lo cual no está permitido. Por lo tanto toma solo a la primera imagen generada esta siendo referenciada correctamente. lo que te sugiero hagas es generar identificadores dinamicos para cada imagen.
    – DavElsanto
    Commented el 16 oct. 2019 a las 22:26
  • Si, supuse que tenia que ver algo del id por como estaba funcionando. Como seria eso de los identificadores dinamicos? Me podrias dar un codigo de ejemplo asi lo trato de pasar al mio? Gracias
    – iMSn20
    Commented el 16 oct. 2019 a las 22:27
  • 1
    Por lo que puedo ver estas usando Razor y lamentablemente no he trabajado con el en mucho tiempo. Pero la idea por ejemplo esta en generar el id de la siguiente forma id="img1", etc. Es cuestion que revises la documentacion de razor y veas como aumentar en este caso se me ocurre pasar el numero del iterador(el for) actual
    – DavElsanto
    Commented el 16 oct. 2019 a las 22:32
  • @DavElsanto, gracias por las respuestas. Si, como generar el id dinamico si se, pero no se como hacer que el script funcione con distintos id. La parte que no se como hacer esta en el script.
    – iMSn20
    Commented el 16 oct. 2019 a las 22:49
  • dentro del razor tambien puedes generar el script para cada img
    – DavElsanto
    Commented el 17 oct. 2019 a las 13:15

1 respuesta 1

1

Estás creando muchas etiquetas img con el mismo id (porque lo estás haciendo dentro de un ciclo) así que cuando esta instrucción se ejecuta var img = document.getElementById("myImg"); solamente tomará la primera imagen siempre. Así mismo estas creando muchos div con el id "myModal", los id son identificadores únicos, tener muchos elementos html con el mismo id es incorrecto. Así que el div con id "myModal" debería estar fuera del ciclo for.

En el siguiente ejemplo te muestro 4 div con su respectiva imagen cada uno, notese que en las imágenes no le puse un id, pues no es necesario y que el div con id="MyModal" está aparte y es uno solamente, en vez de tener uno para cada imagen.

Luego utilizo el evento show.bs.modal que se ejecuta cada vez que se muestra el modal y luego esta instrucción var activador = $(event.relatedTarget); que te permite capturar el elemento que activa el modal, luego en esta instrucción var imagen = $(activador).find("img"); utilizo la función find de jquery para encontrar la imagen que está dentro del elemento que activó el modal y finalmente mediante esta instrucción modal.find('.modal-body').html(imagen) encuentro el cuerpo del modal y le asigno a su html la imagen que encontré anteriormente.

Importante: en el ejemplo que te muestro estoy usando bootstrap modal con la versión 3.3.7 de bootstrap.

$(document).ready(function() { 

  $('#MyModal').on('show.bs.modal', function (event) {
    var activador = $(event.relatedTarget);
    var imagen = $(activador).find("img");
    var modal = $(this)
    modal.find('.modal-body').html(imagen)
  })

})
.lista-imagenes img {
  width: 200px;
  heigth: 200px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="row text-center text-lg-left lista-imagenes">

  <div class="col-md-2 offset-md-1">
    <a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target="#MyModal">
      <img class="img-fluid img-thumbnail modall" src="https://news.nationalgeographic.com/content/dam/news/2016/02/24/01highanimals.ngsversion.1456244998811.adapt.1900.1.jpg" alt="">
    </a>
  </div>       
  
  
  <div class="col-md-2 offset-md-1">
    <a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target="#MyModal">
      <img class="img-fluid img-thumbnail modall" src="https://kids.nationalgeographic.com/content/dam/kids/photos/Video/AwesomeAnimals_tile.ngsversion.1424373996329.jpg" alt="">
    </a>
  </div> 
  
  <div class="col-md-2 offset-md-1">
    <a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target="#MyModal">
      <img class="img-fluid img-thumbnail modall" src="https://wallpapershome.com/images/wallpapers/panda-3840x2160-cute-animals-4k-14878.jpg" alt="">
    </a>
  </div> 
  
  <div class="col-md-2 offset-md-1">
    <a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target="#MyModal">
      <img class="img-fluid img-thumbnail modall" src="https://beautifulcoolwallpapers.files.wordpress.com/2011/08/2-395-animals_008-313000.jpeg" alt="">
    </a>
  </div> 
  
</div>


<div class="modal fade" tabindex="-1" role="dialog" id="MyModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Titulo del Modal</h4>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

1
  • 1
    Muchisimas gracias Luis! Funciono a la perfeccion, nomas le tengo que hacer unos retoques para mi codigo pero esta perfecto. Muchas gracias.
    – iMSn20
    Commented el 18 oct. 2019 a las 1:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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