JavaScript - Crear modal con javascript por cada imagen que existe

   
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]

Crear modal con javascript por cada imagen que existe

Publicado por [abZeroX] (100 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
Imágen de perfil de ScriptShow

Crear modal con javascript por cada imagen que existe

Publicado por ScriptShow (471 intervenciones) el 21/09/2017 11:21:04
Saludos Nicolás,

por simplificar un poco. A ver qué te parece el ejemplo:

https://www.lawebdelprogramador.com/codigo/JavaScript/3992-Foto-Fade-Zoom-Responsive.html

Es adaptable, ampliable, compatible, etc.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar