Skip to content

Instantly share code, notes, and snippets.

@artursopelnik

artursopelnik/astro-lightbox.astro

Forked from blackspike/astro-lightbox.astro
Created May 31, 2025 08:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save artursopelnik/53ad98b3d2580d559906e02163753ca0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save artursopelnik/53ad98b3d2580d559906e02163753ca0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @blackspike blackspike revised this gist Nov 23, 2024. 1 changed file with 56 additions and 45 deletions.
    101 changes: 56 additions & 45 deletions astro-lightbox.astro
    View file
    Original file line number Diff line number Diff line change
    @@ -5,13 +5,24 @@ const { files, dir, id } = Astro.props
    ---

    <section class="glightbox-images" id={`gallery-${id || 1}`}>
    {
    files.map((f) => (
    <a href={`/lightboxes/${dir}/large/${f.file}`} class="glightbox glightbox-link" data-gallery={`gallery-${id || 1}`} data-title={f.title ?? null} data-description={f.description ?? null}>
    <img src={`/lightboxes/${dir}/thumbs/${f.file}`} alt={f.alt} class="glightbox-image" loading="lazy" />
    </a>
    ))
    }
    {
    files.map((f) => (
    <a
    href={`/lightboxes/${dir}/large/${f.file}`}
    class="glightbox glightbox-link"
    data-gallery={`gallery-${id || 1}`}
    data-title={f.title ?? null}
    data-description={f.description ?? null}>
    <img
    src={`/lightboxes/${dir}/thumbs/${f.file}`}
    alt={f.alt}
    class="glightbox-image"
    loading="lazy"
    />
    </a>
    ))
    }

    </section>

    <script>
    @@ -23,49 +34,49 @@ const { files, dir, id } = Astro.props
    </script>

    <style>
    .glightbox-images {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    .glightbox-images {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));

    *,
    *::after,
    *::before {
    all: unset;
    font-size: 1rem;
    }
    *,
    *::after,
    *::before {
    all: unset;
    font-size: 1rem;
    }
    }

    .glightbox-link {
    block-size: 100%;
    border-radius: 1rem;
    overflow: hidden;
    inline-size: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    }
    .glightbox-link {
    block-size: 100%;
    border-radius: 1rem;
    overflow: hidden;
    inline-size: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    }

    .glightbox-image {
    aspect-ratio: 1/1;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
    }
    .glightbox-image {
    aspect-ratio: 1/1;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
    }
    </style>

    <style is:global>
    /* Overrides */
    .gslide-description {
    background-color: #1c1e1f !important;
    color: #d2d2d2 !important;
    }
    .gslide-title {
    color: #fff !important;
    }
    .gslide-title {
    margin-bottom: 0 !important;
    }
    .gslide-title + .gslide-desc {
    margin-top: 12px !important;
    }
    /* Overrides */
    .gslide-description {
    background-color: #1c1e1f !important;
    color: #d2d2d2 !important;
    }
    .gslide-title {
    color: #fff !important;
    }
    .gslide-title {
    margin-bottom: 0 !important;
    }
    .gslide-title + .gslide-desc {
    margin-top: 12px !important;
    }
    </style>
  2. @blackspike blackspike revised this gist Nov 23, 2024. 1 changed file with 24 additions and 17 deletions.
    41 changes: 24 additions & 17 deletions astro-lightbox.astro
    View file
    Original file line number Diff line number Diff line change
    @@ -1,35 +1,25 @@
    ---
    import "glightbox/dist/css/glightbox.css";
    import 'glightbox/dist/css/glightbox.css'
    const { files, dir, id } = Astro.props;
    const { files, dir, id } = Astro.props
    ---

    <section class="glightbox-images" id={`gallery-${id || 1}`}>
    {
    files.map((f) => (
    <a
    href={`/lightboxes/${dir}/large/${f.file}`}
    class="glightbox glightbox-link"
    data-gallery={`gallery-${id || 1}`}
    data-title={f.title ?? null}
    >
    <img
    src={`/lightboxes/${dir}/thumbs/${f.file}`}
    alt={f.alt}
    class="glightbox-image"
    loading="lazy"
    />
    <a href={`/lightboxes/${dir}/large/${f.file}`} class="glightbox glightbox-link" data-gallery={`gallery-${id || 1}`} data-title={f.title ?? null} data-description={f.description ?? null}>
    <img src={`/lightboxes/${dir}/thumbs/${f.file}`} alt={f.alt} class="glightbox-image" loading="lazy" />
    </a>
    ))
    }
    </section>

    <script>
    import GLightbox from "glightbox";
    import GLightbox from 'glightbox'

    const lightbox = GLightbox({
    selector: ".glightbox",
    });
    selector: '.glightbox',
    })
    </script>

    <style>
    @@ -62,3 +52,20 @@ const { files, dir, id } = Astro.props;
    object-fit: cover;
    }
    </style>

    <style is:global>
    /* Overrides */
    .gslide-description {
    background-color: #1c1e1f !important;
    color: #d2d2d2 !important;
    }
    .gslide-title {
    color: #fff !important;
    }
    .gslide-title {
    margin-bottom: 0 !important;
    }
    .gslide-title + .gslide-desc {
    margin-top: 12px !important;
    }
    </style>
  3. @blackspike blackspike renamed this gist Nov 23, 2024. 1 changed file with 0 additions and 0 deletions.
    0 astro-lightbox.js → astro-lightbox.astro
    View file
    File renamed without changes.
  4. @blackspike blackspike revised this gist Nov 23, 2024. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions astro-lightbox.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,21 @@
    ---
    import "glightbox/dist/css/glightbox.css";

    const { files, dir } = Astro.props;
    const { files, dir, id } = Astro.props;
    ---

    <section id="lightbox" class="glightbox-images">
    <section class="glightbox-images" id={`gallery-${id || 1}`}>
    {
    files.map((f) => (
    <a
    href={`/lightboxes/${dir}/large/${f.file}`}
    class="glightbox glightbox-link"
    data-gallery="gallery-1"
    data-gallery={`gallery-${id || 1}`}
    data-title={f.title ?? null}
    >
    <img
    src={`/lightboxes/${dir}/thumbs/${f.file}`}
    alt={f.title}
    alt={f.alt}
    class="glightbox-image"
    loading="lazy"
    />
    @@ -33,7 +34,6 @@ const { files, dir } = Astro.props;

    <style>
    .glightbox-images {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  5. @blackspike blackspike revised this gist Nov 20, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion astro-lightbox.js
    View file
    Original file line number Diff line number Diff line change
    @@ -41,8 +41,8 @@ const { files, dir } = Astro.props;
    *,
    *::after,
    *::before {
    font-size: 1rem;
    all: unset;
    font-size: 1rem;
    }
    }

  6. @blackspike blackspike created this gist Nov 20, 2024.
    64 changes: 64 additions & 0 deletions astro-lightbox.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    ---
    import "glightbox/dist/css/glightbox.css";

    const { files, dir } = Astro.props;
    ---

    <section id="lightbox" class="glightbox-images">
    {
    files.map((f) => (
    <a
    href={`/lightboxes/${dir}/large/${f.file}`}
    class="glightbox glightbox-link"
    data-gallery="gallery-1"
    >
    <img
    src={`/lightboxes/${dir}/thumbs/${f.file}`}
    alt={f.title}
    class="glightbox-image"
    loading="lazy"
    />
    </a>
    ))
    }
    </section>

    <script>
    import GLightbox from "glightbox";

    const lightbox = GLightbox({
    selector: ".glightbox",
    });
    </script>

    <style>
    .glightbox-images {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));

    *,
    *::after,
    *::before {
    font-size: 1rem;
    all: unset;
    }
    }

    .glightbox-link {
    block-size: 100%;
    border-radius: 1rem;
    overflow: hidden;
    inline-size: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    }

    .glightbox-image {
    aspect-ratio: 1/1;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
    }
    </style>