Skip to content

Releases: LeashFox/splidebox

splidebox v1.0.10

04 Jul 15:39
@LeashFox LeashFox
v1.0.10
677a47a
Compare
Choose a tag to compare
splidebox v1.0.10 Latest
Latest

Splidebox Logo

Splidebox is a lightweight JavaScript library for creating customisable image lightboxes using Splide.js. Easily integrate image galleries into your web applications with minimal setup.

This project wouldn't be possible without:

  • Naotoshi Fujita, the developer behind Splide
  • cure53, the developer behind DOMPurify
  • Tailwind Labs, the developers behind Tailwind.

Also, an honorary mention of Gausarts, the developer behind a Drupal extension that shares the same name Splidebox - (https://www.drupal.org/project/splidebox)

Any contributions, suggestions, or feedback is welcome.

Roadmap ⚠️

There's some quality of live improvements that I am working towards, namely:

  • Add option to fetch image alt, which may include changing the array of URLs to an object? Or default to value
  • Option to remove Tailwind and create native css to reduce dependencies.

New Features ✨

Splidebox will now automatically grab images from the attribute data-splidebox-images from the specified openButtonSelector

If left blank, it'll use the images specified in the images option when initialising Splidebox.

This means that you can have multiple elements with the same openButtonSelector class, yet load different images, all on the same markup for the lightbox (rather than having multiple containers for different lightboxes.)

<div class="image cursor-pointer"
     data-splidebox-images='["https://placehold.co/100x100","https://placehold.co/150x150","https://placehold.co/200x200"]'>
     
    <img class="w-[250px] w-[250px] m-auto object-cover"
         src="https://placehold.co/300x300"
         alt="Image"/>
</div>

Supported Options

  • background: (object)

    • enable: (boolean) (default: true)
    • backgroundColor: (string) (default: 'rgba(0, 0, 0, 0.7)')

  • closeWithEscapeKey: (boolean) (default: true)

  • openButtonSelector: (string) (default: 'open-splidebox')

  • closeButtonSelector: (string) (default: 'close-splidebox')

  • splideboxLabel: (string) (default: 'An image carousel.')

    • Used to set the aria-label attribute for the Splide carousel.

  • images: (array) (default: [])

    • Array of image URLs to display in the carousel.

  • splideOptions: (object)

Example:

You'll need to instantiate the class when building a Splidebox. It's best to do this after the DOM content has loaded:

document.addEventListener('DOMContentLoaded', () => {

    const lightboxWrapper = document.getElementById('lightbox-wrapper');

    let imageArray = [
        'https://placehold.co/300x300',
        'https://placehold.co/350x350',
        'https://placehold.co/400x400',
    ]

    lightboxWrapper.Splidebox({
        background: {
            enable: true, // You don't need to specify this.
            backgroundColor: 'rgba(0, 0, 0, 0.4)',
        },
        closeWithEscapeKey: false,
        openButtonSelector: '.image',
        closeButtonSelector: '#new_close_button',
        splideboxLabel: 'Product lightbox',
        images: imageArray,
        splideOptions: {
            type: 'loop',
            pagination: 'false',
            // Any further options from Splide (https://splidejs.com/guides/options/)
        }
    })

});

Full Changelog

https://github.com/LeashFox/splidebox/commits/master/

Assets 2
Loading