JavaScript - Añadir botón pare cerra ventana

 
Vista:
sin imagen de perfil
Val: 15
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Añadir botón pare cerra ventana

Publicado por Joseba (6 intervenciones) el 30/04/2020 13:10:43
Aupa!, he copiado este code que esta aquí https://gist.github.com/shrestharikesh/f4d094e0a64f10aa991733506fd9d791, la persona que ha hecho este code, lo ha puesto aquí para ver como funciona https://codepen.io/nsom/pen/VbqLew

Como lo tengo yo,

Como llamo a las lbrerias de javascript y html de mi pagina Web,

1
2
3
4
5
6
7
8
9
10
11
12
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js">    </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
 
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />


El Html,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
  <div class="row">
    <a href="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/113.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3" >
      <img src="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/113.jpg" class="img-fluid rounded">
    </a>
   <a href="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/2-2.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
      <img src="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/2-2.jpg" class="img-fluid rounded">
    </a>
    <a href="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/3-2.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
      <img src="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/3-2.jpg" class="img-fluid rounded">
    </a>
 
  </div>
</div>

El Css,

1
2
3
4
5
.row {
    margin: 15px;
}
 
image { width: 70%; padding-left: 3rem;}


y el code de javascript,

1
2
3
4
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
   event.preventDefault();
  $(this).ekkoLightbox();
});

El proble es que cuando salen las ventanas, salen sin el botón para cerrarlas, las ventanas se cierran cliqueando fuera de la fotografía,.

https://i.imgur.com/HUNJVsM.png

Me podria decir alguien porfavor como ponerle un botón para cerrar las fotografía ?
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
sin imagen de perfil
Val: 15
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Añadir botón pare cerra ventana

Publicado por Joseba (6 intervenciones) el 01/05/2020 16:42:30
Aupa, en otro Forum me dieron la solución...en la pagina web donde dan este code https://masspec.scripps.edu/personnel/lightbox-master/examples/, dan diferentes opciones para añadir al code, yo la vi y entente algunas, pero como como no tengo ni idea de implementarlas no me salio, so , la solución hera añadir
1
alwaysShowClose: true

Todo el code junto,

1
2
3
4
5
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
 
  event.preventDefault();
  $(this).ekkoLightbox({alwaysShowClose: true});
});
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