Descargar mkdocs glightbox - Descarga del código fuente mkdocs glightbox

mkdocs glightbox

Otro código fuente

mkdocs-glightbox-0.4.0

Descargar

MkDocs GLightbox

Un complemento de MkDocs admite lightbox de imágenes con GLightbox.

GLightbox es una biblioteca lightbox de JavaScript pura con soporte móvil.

Demostración en vivo con Material para MkDocs.

Dependencia

Archivo javascript GLightbox y archivo CSS
1. GLightbox==3.2.0

Uso

Instale el complemento desde PyPI
```
pip install mkdocs-glightbox
```
Agregue el complemento glightbox a las secciones de complementos de mkdocs.yml:
```
 plugins :
   - glightbox
```
Todas las imágenes se agregarán automáticamente al efecto de caja de luz, excepto las imágenes en una etiqueta de anclaje y las imágenes emoji de extensiones de pymdown.

Puede personalizar el complemento pasando opciones en mkdocs.yml:

 plugins :
   - glightbox :
       touchNavigation : true
       loop : false
       effect : zoom
       slide_effect : slide
       width : 100%
       height : auto
       zoomable : true
       draggable : true
       skip_classes :
         - custom-skip-class-name
       auto_caption : false
       caption_position : bottom
       background : white
       shadow : true
       manual : false

Opción	Por defecto	Descripción
toqueNavegación	verdadero	Activa o desactiva la navegación táctil (deslizar).
bucle	FALSO	El bucle se desliza al final.
efecto	zoom	Nombre del efecto en la caja de luz abierta. (zoom, desvanecimiento, ninguno)
efecto_deslizamiento	deslizar	Nombre del efecto en la diapositiva de la caja de luz. (deslizar, hacer zoom, desvanecer, ninguno)
ancho	auto	Ancho para elementos en línea y iframes. Puede utilizar cualquier unidad, por ejemplo, 90 % o 100 vw para ancho completo.
altura	auto	Altura para elementos en línea e iframes. Puede utilizar cualquier unidad, por ejemplo 90%, 100vh o automática.
ampliable	verdadero	Activa o desactiva las imágenes ampliables.
arrastrable	verdadero	Habilite o deshabilite el arrastre del mouse para ir a la diapositiva anterior y siguiente.
saltar_clases	[ ]	Deshabilite la caja de luz de aquellas imágenes con un nombre de clase personalizado específico.
auto_caption	FALSO	Habilite o deshabilite el uso de alt de la imagen como título de título automáticamente.
posición_caption	abajo	Posición predeterminada de los subtítulos. (abajo, arriba, izquierda, derecha)
fondo	blanco	El CSS de fondo de la imagen de la caja de luz. El fondo se mostrará cuando la imagen sea transparente. Puedes usar cualquier valor CSS para el fondo, por ejemplo `#74b9ff` o `Gainsboro` o `none` por nada.
sombra	verdadero	Habilite o deshabilite la sombra de la imagen de la caja de luz. Desactívelo cuando `none` haya fondo para evitar sombras alrededor de la imagen transparente.
manual	FALSO	Cuando es verdadero, lightbox debe habilitarse para cada imagen manualmente agregando la clase `on-glb` o agregando `glightbox: true` meta en la página.

Consulta más información de opciones en GLightbox Docs.

Para mayor flexibilidad:
1. Desactivar por imagen: desactiva la caja de luz para imágenes específicas. Adecuado para una pequeña cantidad de imágenes que no necesitan el efecto de caja de luz.
2. Desactivar por página: Desactiva la caja de luz para páginas específicas. Adecuado para una pequeña cantidad de páginas que no necesitan el efecto de caja de luz.
3. Habilitar por imagen: deshabilite la caja de luz para páginas específicas pero habilite algunas imágenes en esas páginas. Adecuado para una pequeña cantidad de imágenes que necesitan el efecto de caja de luz.
4. Deshabilitar globalmente pero habilitar por imagen o página: deshabilite la caja de luz globalmente pero habilite imágenes o páginas específicas. Adecuado para una gran cantidad de imágenes o páginas que no necesitan el efecto de caja de luz.
Admite subtítulos de imagen de caja de luz, consulte más detalles en Subtítulo.
Admite agrupar imágenes como galerías, consulte más detalles en Galería.

Nota

Si es la primera vez que utiliza la función del complemento MkDocs, debe saber que MkDocs incluye un complemento predeterminado llamado search . Si desea conservar la función de búsqueda, debe volver a agregar el complemento search a la lista plugins .

como funciona

Copie el archivo de script GLightbox en el directorio site/assets/javascripts/ y el archivo CSS en el directorio site/assets/stylesheets/
Importe el script GLightbox y el archivo CSS y agregue código javascript en cada página excluidas las páginas deshabilitadas
Busque todas las etiquetas de imagen y deforme con una etiqueta de anclaje para las imágenes excluidas de GLightbox con clase de omisión o que ya estén deformadas con una etiqueta de anclaje