diff --git a/demo-mkdocs/docs/index.md b/demo-mkdocs/docs/index.md index ea643b5..1fb5ef6 100644 --- a/demo-mkdocs/docs/index.md +++ b/demo-mkdocs/docs/index.md @@ -49,21 +49,25 @@ GLightbox is a pure javascript lightbox library with mobile support. - custom-skip-class-name auto_caption: false caption_position: bottom + background: white + shadow: true ``` - | Option | Default | Description | - | ---------------- | ------- | ---------------------------------------------------------------------------------------------------- | - | touchNavigation | true | Enable or disable the touch navigation (swipe). | - | loop | false | Loop slides on end. | - | effect | zoom | Name of the effect on lightbox open. (zoom, fade, none) | - | slide_effect | slide | Name of the effect on lightbox slide. (slide, zoom, fade, none) | - | width | 100% | Width for inline elements and iframes. You can use any unit for example 90% or 100vw for full width. | - | height | auto | Height for inline elements and iframes. You can use any unit for example 90%, 100vh or auto. | - | zoomable | true | Enable or disable zoomable images. | - | draggable | true | Enable or disable mouse drag to go prev and next slide. | - | skip_classes | [ ] | Disable lightbox of those image with specific custom class name. | - | auto_caption | false | Enable or disable using alt of image as caption title automatically. | - | caption_position | bottom | Default captions position. (bottom, top, left, right) | + | Option | Default | Description | + |---|---|---| + | touchNavigation | true | Enable or disable the touch navigation (swipe). | + | loop | false | Loop slides on end. | + | effect | zoom | Name of the effect on lightbox open. (zoom, fade, none) | + | slide_effect | slide | Name of the effect on lightbox slide. (slide, zoom, fade, none) | + | width | auto | Width for inline elements and iframes. You can use any unit for example 90% or 100vw for full width. | + | height | auto | Height for inline elements and iframes. You can use any unit for example 90%, 100vh or auto. | + | zoomable | true | Enable or disable zoomable images. | + | draggable | true | Enable or disable mouse drag to go prev and next slide. | + | skip_classes | [ ] | Disable lightbox of those image with specific custom class name. | + | auto_caption | false | Enable or disable using alt of image as caption title automatically. | + | caption_position | bottom | Default captions position. (bottom, top, left, right) | + | background | white | The background CSS of lightbox image. The background will shown when the image is transparent. You can use any CSS value for the background for example `#74b9ff` or `Gainsboro` or `none` for nothing. | + | shadow | true | Enable or disable the shadow of lightbox image. Disable it when the background is `none` to prevent shadow around the transparent image. | Check more options information on [GLightbox Docs](https://github.com/biati-digital/glightbox#lightbox-options). diff --git a/docs/caption/caption/index.html b/docs/caption/caption/index.html index 20f6a88..4da5666 100644 --- a/docs/caption/caption/index.html +++ b/docs/caption/caption/index.html @@ -68,17 +68,15 @@ + html.glightbox-open { overflow: initial; height: 100%; } + .gslide-title { margin-top: 0px; user-select: text; } + .gslide-desc { color: #666; user-select: text; } + .gslide-image img { background: white; } + .gscrollbar-fixer { padding-right: 15px; } + .gdesc-inner { font-size: 0.75rem; } + body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);} + body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);} + body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);} diff --git a/docs/disable/image/index.html b/docs/disable/image/index.html index ed9b67d..e593fdc 100644 --- a/docs/disable/image/index.html +++ b/docs/disable/image/index.html @@ -68,17 +68,15 @@ + html.glightbox-open { overflow: initial; height: 100%; } + .gslide-title { margin-top: 0px; user-select: text; } + .gslide-desc { color: #666; user-select: text; } + .gslide-image img { background: white; } + .gscrollbar-fixer { padding-right: 15px; } + .gdesc-inner { font-size: 0.75rem; } + body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);} + body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);} + body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);} diff --git a/docs/disable/manual/index.html b/docs/disable/manual/index.html index 36175dc..aa7ec0b 100644 --- a/docs/disable/manual/index.html +++ b/docs/disable/manual/index.html @@ -66,17 +66,15 @@ + html.glightbox-open { overflow: initial; height: 100%; } + .gslide-title { margin-top: 0px; user-select: text; } + .gslide-desc { color: #666; user-select: text; } + .gslide-image img { background: white; } + .gscrollbar-fixer { padding-right: 15px; } + .gdesc-inner { font-size: 0.75rem; } + body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);} + body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);} + body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);} diff --git a/docs/gallery/gallery/index.html b/docs/gallery/gallery/index.html index ad693e4..cba2b25 100644 --- a/docs/gallery/gallery/index.html +++ b/docs/gallery/gallery/index.html @@ -68,17 +68,15 @@ + html.glightbox-open { overflow: initial; height: 100%; } + .gslide-title { margin-top: 0px; user-select: text; } + .gslide-desc { color: #666; user-select: text; } + .gslide-image img { background: white; } + .gscrollbar-fixer { padding-right: 15px; } + .gdesc-inner { font-size: 0.75rem; } + body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);} + body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);} + body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);} diff --git a/docs/index.html b/docs/index.html index 01b8a5d..39314b1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -66,17 +66,15 @@ + html.glightbox-open { overflow: initial; height: 100%; } + .gslide-title { margin-top: 0px; user-select: text; } + .gslide-desc { color: #666; user-select: text; } + .gslide-image img { background: white; } + .gscrollbar-fixer { padding-right: 15px; } + .gdesc-inner { font-size: 0.75rem; } + body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);} + body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);} + body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);} @@ -717,6 +715,8 @@
width | -100% | +auto | Width for inline elements and iframes. You can use any unit for example 90% or 100vw for full width. |
bottom | Default captions position. (bottom, top, left, right) | ||
background | +white | +The background CSS of lightbox image. The background will shown when the image is transparent. You can use any CSS value for the background for example #74b9ff or Gainsboro or none for nothing. |
+|
shadow | +true | +Enable or disable the shadow of lightbox image. Disable it when the background is none to prevent shadow around the transparent image. |
+
Check more options information on GLightbox Docs.
diff --git a/docs/sitemap.xml b/docs/sitemap.xml index b67d046..335f3ef 100644 --- a/docs/sitemap.xml +++ b/docs/sitemap.xml @@ -2,42 +2,42 @@