Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Crear modal con javascript por cada imagen que existe

JavaScript - Crear modal con javascript por cada imagen que existe

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Nicolás

Crear modal con javascript por cada imagen que existe

Publicado por Nicolás (1 intervención) el 20/09/2017 00:27:17
Muy buenas tardes.

Me encuentro intentando realizar lo mencionado en el título de este post, únicamente mediante javascript, crear una ventana emergente del tipo 'modal' por cada etiqueta IMG que exista. De esta forma, se evitaría redactar a mano cada línea de html que llamaría a la creación de una ventana modal. Si me pueden asesorar se los agradecería infinitamente.
A continuación comparto la estructura de mi código para visualizar el panorama que enfrento:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="container-fluid">
  <div class="container">
    <div class="row">
 
      <figure class="col-xs-6">
      <img src="http://payload496.cargocollective.com/1/22/723588/12222452/prt_320x212_1480296530.jpg" alt="CRANEOPLASTIA" class="img-thumbnail" id="myImg">
        <figcaption>CRANEOPLASTÍA</figcaption>
      </figure>
 
         <figure class="col-xs-6">
        <img src="http://payload496.cargocollective.com/1/22/723588/12221313/prt_320x212_1480272979.JPG" alt="" class="img-thumbnail">
        <figcaption>IMPLANTE DE HÚMERO</figcaption>
      </figure>
 
       <figure class="col-xs-6">
        <img src="http://payload496.cargocollective.com/1/22/723588/12221565/prt_320x212_1480279038.JPG" alt="" class="img-thumbnail">
        <figcaption>IMPLANTE A MEDIDA</figcaption>
      </figure>
 
          <figure class="col-xs-6">
        <img src="http://payload496.cargocollective.com/1/22/723588/12222480/prt_320x212_1480297118.jpg" alt="" class="img-thumbnail">
        <figcaption>ESPACIADORES DE CADERA</figcaption>
      </figure>
          <figure class="col-xs-6">
        <img src="http://payload496.cargocollective.com/1/22/723588/12221507/prt_320x212_1480277643.JPG" alt="" class="img-thumbnail">
        <figcaption>ESPACIADORES DE RODILLA</figcaption>
      </figure>
          <figure class="col-xs-6">
            <img src="http://payload496.cargocollective.com/1/22/723588/12221473/prt_320x212_1480277280.png" alt="" class="img-thumbnail">
            <figcaption>HEMIPELVIS</figcaption>
      </figure>
 
      <figure class="col-xs-6">
        <img src="http://payload496.cargocollective.com/1/22/723588/12221374/prt_320x212_1480274606.JPG" alt="" class="img-thumbnail">
        <figcaption>IMPLANTE DE CADERA</figcaption>
      </figure>
      <figure class="col-xs-6">
        <img src="http://payload496.cargocollective.com/1/22/723588/12221349/prt_320x212_1480275916.JPG" alt="" class="img-thumbnail">
        <figcaption>RECONSTRUCCIÓN ACETABULAR</figcaption>
      </figure>
      <figure class="col-xs-6">
        <img src="http://payload496.cargocollective.com/1/22/723588/12221529/prt_320x212_1480278065.JPG" alt="" class="img-thumbnail">
        <figcaption>CALCÁNEO-STOP</figcaption>
      </figure>
      <figure class="col-xs-6">
        <img src="http://payload496.cargocollective.com/1/22/723588/12221337/prt_320x212_1480273630.jpg" alt="" class="img-thumbnail">
        <figcaption>MANGO PORTA RASPA</figcaption>
      </figure>
      <figure class="col-xs-6">
        <img src="http://payload496.cargocollective.com/1/22/723588/12223920/prt_320x212_1480339976.jpg" alt="" class="img-thumbnail">
        <figcaption>CLAVO ARTRODESIS DE RODILLA</figcaption>
      </figure>
 
 
    </div>
  </div>
</div>
 
<!-- Creates the bootstrap modal where the image will appear -->
 
<div id="myModal" class="modal">
 
  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
 
  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
 
  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
figcaption {
  text-align: center;
  font-weight: 600;
}
 
// ESTILOS MODAL

 
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
 
 
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}
 
 
#caption {

    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;

    padding: 10px 0;
    height: 150px;
}
 
 
.modal-content, #caption { 

    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}
 
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}
 
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
 
/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;

    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
 
.close:hover,
.close:focus {
    color: #bbb;

    text-decoration: none;
    cursor: pointer;
}
 
 
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 // Get the modal

var modal = document.getElementById('myModal');
 
 
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;
}
 
var span = document.getElementsByClassName("close")[0];
 
 
span.onclick = function() {
  modal.style.display = "none";
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de [abZeroX]
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear modal con javascript por cada imagen que existe

Publicado por [abZeroX] (130 intervenciones) el 21/09/2017 03:46:28
Hola, modifique un poco tu script para adaptarlo a lo que pides:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function(){
    var modal = document.getElementById('myModal');
    var modalImg = document.getElementById('img01');
    var captionText = document.getElementById('caption');
    var closeButton = document.querySelector('.close');
    // Recupero todas las imágenes por su clase

    var images = Array.prototype.slice.call(document.querySelectorAll('.img-thumbnail'));
 
    images.forEach(function(image) {
        image.onclick = function (e) {
            modal.style.display = 'block';
            modalImg.src = e.target.src;
            captionText.innerHTML = e.target.alt;
        }
    });
 
    closeButton.onclick = function () {
        modal.style.display = 'none';
    }
})();

Nos comentas.

NOTA: Fijate que no todas las imágenes tiene valor en el atributo alt de img
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar