1.1.6

1.1.6

1.1.5

Full Changelog: 1.1.3...1.1.5

1.1.3

What's Changed

• Bump @sveltejs/kit from 1.7.2 to 1.15.1 by @dependabot in #66
• Bump @sveltejs/kit from 1.15.1 to 1.15.2 by @dependabot in #67
• Fix svelte accessibility warnings by @amr3k in #72

New Contributors

• @amr3k made their first contribution in #72

Full Changelog: v1.1.2...1.1.3

svelte-lightbox

Overview of changes

• Reworked whole library from ground up
• Removed pesky/error prone code
• Stabilized API
• Improved customization
• First stable reliase

svelte-lightbox

Svelte-lightbox

Stable, tested

Lightweight Lightbox Svelte component, no vanilla JS or jQuery, just pure Svelte component. There is also support for
mobile devices. Tested on Svelte and Sapper. Note that this component is in development, expect bugs, if you notice some,
please report them to this component's GitHub repo to the 'Issues' section.

Usage

<script>
    //Svelte import
    import { 
        Lightbox
    } from 'svelte-lightbox';
    //Sapper import
	import Lightbox from 'svelte-lightbox/src/Lightbox.svelte';
</script>

    // STABLE, TESTED

    <Lightbox description="Simple lightbox">
        <img src="path" alt="Simple lightbox">
    </Lightbox>

    <Lightbox description="Lightbox with thumbnail and image">
        <img slot="thumbnail" src="path/thumbnail.png" alt="Thumbnail">
        <img slot="image" src="path/image.png" alt="Lightbox image">
    </Lightbox>

Tweaks

So, there are options for customizing your Lightbox component.

Lightbox

These props are customizable:

• thumbnail - boolean - Enables thumbnail to be different from an actual image.
• thumbnailClasses - string - Standard HTML "class" for lightbox thumbnail.
• thumbnailStyle - string - Standard HTML "style" for lightbox thumbnail.
• modalClasses - string - Standard HTML "class" for lightbox modal.
• modalStyle - string - Standard HTML "style" for lightbox modal.
• transitionDuration - number - Duration of lightbox toggle.
• protect - boolean - Enable protection of image from being dragged n dropped.
• title - string/HTML - Image's title that is displayed below the image (in a lightbox), feel free to use HTML
  (eg, <br>, <span>). Everything in a lightbox footer is aligned to the left, but you can override it
  by putting it into <span> which would allow you to apply a different style or a class of your choosing.
• description - string/HTML - Image's description that is, similarly to the title, displayed under the image (in a lightbox).
  The difference between those two is that the title is wrapped in <h2> and description is wrapped in <h5>.
• portrait - boolean - Enables improved portrait mode.
• noScroll - boolean - Disables body scrolling while in lightbox mode, default true.