¿cual es el script, css y html para hacer un Fullscreen Lightbox Gallery With Thumbnail Navigation con efectos de transición al abrir y cerrar la imagen?
		
		
	 
Aquí te dejo un ejemplo de código HTML, CSS y JavaScript para implementar una galería de Lightbox en pantalla completa con navegación de miniaturas y efectos de transición suave.
HTML
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Galería de imágenes en pantalla completa</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <div class="gallery">
      <figure>
        <a href="img1.jpg"><img src="thumb1.jpg"></a>
        <figcaption>Paisaje 1</figcaption>
      </figure>
      <figure>
        <a href="img2.jpg"><img src="thumb2.jpg"></a>
        <figcaption>Paisaje 2</figcaption>
      </figure>
      <figure>
        <a href="img3.jpg"><img src="thumb3.jpg"></a>
        <figcaption>Paisaje 3</figcaption>
      </figure>
      <figure>
        <a href="img4.jpg"><img src="thumb4.jpg"></a>
        <figcaption>Paisaje 4</figcaption>
      </figure>
      <figure>
        <a href="img5.jpg"><img src="thumb5.jpg"></a>
        <figcaption>Paisaje 5</figcaption>
      </figure>
      <figure>
        <a href="img6.jpg"><img src="thumb6.jpg"></a>
        <figcaption>Paisaje 6</figcaption>
      </figure>
    </div>
    <div id="lightbox">
      <div id="content">
        <img src="">
        <div id="caption"></div>
        <span id="close">×</span>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>
```
CSS
```css
* {
  box-sizing: border-box;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
body {
  background-color: #f0f0f0;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin: 20px;
}
figure {
  margin: 0;
  overflow: hidden;
  position: relative;
}
figcaption {
  background-color: rgba(0,0,0,0.5);
  bottom: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  height: 40px;
  opacity: 0;
  padding: 10px;
  position: absolute;
  transition: all .4s ease-in-out;
  width: 100%;
}
figcaption:hover {
  opacity: 1;
}
img {
  max-width: 100%;
}
#lightbox {
  align-items: center;
  background-color: rgba(0,0,0,0.9);
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
#content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  text-align: center;
}
#content img {
  max-height: 90%;
  max-width: 90%;
  overflow: auto;
}
#caption {
  color: #fff;
  font-size: 2rem;
  margin-top: 10px;
}
#close {
  color: #fff;
  cursor: pointer;
  font-size: 5rem;
  margin-top: -60px;
  position: absolute;
  right: 20px;
  top: 0px;
  transition: all .4s ease-in-out;
}
#close:hover {
  color: red;
}
```
JavaScript
```js
const gallery = document.querySelector('.gallery');
const lightbox = document.querySelector('#lightbox');
const content = document.querySelector('#content');
const caption = document.querySelector('#caption');
const close = document.querySelector('#close');
let images = gallery.querySelectorAll('a');
let currentIndex = 0;
images.forEach((img, index) => {
  img.addEventListener('click', function(e) {
    e.preventDefault();
    currentIndex = index;
    openLightbox();
    changeImage();
  });
});
document.addEventListener('keydown', function(e) {
  if (lightbox.style.display === 'flex') {
    if (e.keyCode === 27) {
      closeLightbox();
    }
    if (e.keyCode === 37) {
      currentIndex = (currentIndex + images.length - 1) % images.length;
      changeImage();
    }
    if (e.keyCode === 39) {
      currentIndex = (currentIndex + 1) % images.length;
      changeImage();
    }
  }
});
close.addEventListener('click', closeLightbox);
function openLightbox() {
  lightbox.style.display = 'flex';
}
function closeLightbox() {
  lightbox.style.display = 'none';
  caption.textContent = '';
}
function changeImage() {
  let img = new Image();
  let imagePath = images[currentIndex].getAttribute('href');
  img.onload = function() {
    let width = img.naturalWidth;
    let height = img.naturalHeight;
    let windowWidth = window.innerWidth * 0.9;
    let windowHeight = window.innerHeight * 0.9;
    // Scale image to fit inside the window while keeping aspect ratio
    if (width > windowWidth || height > windowHeight) {
      let aspectRatio = height / width;
      if (width > height) {
        img.width = windowWidth;
        img.height = windowWidth * aspectRatio;
      } else {
        img.height = windowHeight;
        img.width = windowHeight / aspectRatio;
      }
    }
    // Set image and caption in lightbox content
    content.innerHTML = '';
    content.appendChild(img);
    caption.textContent = images[currentIndex].getAttribute('data-caption');
  };
  img.src = imagePath;
}
```
El código HTML define una 'div' que contiene una serie de elementos 'figure', cada uno con una 'a' que enlaza a la imagen completa y una 'figcaption' que contiene la leyenda.
El código CSS define la disposición de la cuadrícula de miniaturas y estilos para la galería y las imágenes de pantalla completa.
El código JavaScript maneja la apertura y cierre de la galería en pantalla completa, y la navegación entre las imágenes. También ajusta el tamaño de las imágenes para que se ajusten a la pantalla y se muestren correctamente.