svelte-lightbox-gallery
npm i -D svelte-lightbox-gallery
What is svelte-lightbox-gallery?
svelte-lightbox-gallery is an easy to use gallery for your svelte project. it doesn’t offer a lot of customisation options by default, for customisation consider downloading it from my github repo and changing it on your own. The package utilizes tailwindcss for styling.
Preview
visit npm.jan-joerg.ch/svelte-lightbox-gallery
Usage
<script lang="ts">import Gallery from "svelte-lightbox-gallery";
let photos = [
"https://source.unsplash.com/random/?city,night",
"https://source.unsplash.com/random/?city,animal"
];
</script>
<Gallery {photos} />
don’t forget this!
since this library works with tailwindcss, you have to adjust your tailwind.config.js to include the gallery. Check out the tailwind documentation
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/svelte-lightbox-gallery/dist/*.svelte'
]
};
Customization
export interface GalleryProps {
/**
* Array of photo URLs
*/
photos: string[];
/**
* Amount of photos to before "show more" button
* 0 => no button, all photos are shown at once
*/
amount?: number;
/**
* darkmode (default: false)
*/
dark?: boolean;
/**
* show more Button color with tailwind syntax, example: "bg-gray-500 hover:bg-gray-600"
*/
buttonColor?: string;
}
<script>
import Gallery from 'svelte-lightbox-gallery';
let photos = [
'https://source.unsplash.com/random/?city,night',
'https://source.unsplash.com/random/?city,animal'
];
</script>
<div class="p-7">
<Gallery {photos} amount={12} dark={true} buttonColor="bg-green-500 hover:bg-green-600" />
</div>
- View image 1
- View image 2
- View image 3
- View image 4
- View image 5
- View image 6
- View image 7
- View image 8
- View image 9
- View image 10
- View image 11
- View image 12
- View image 13
- View image 14
- View image 15
- View image 16
- View image 17
- View image 18
- View image 19
- View image 20
- View image 21
- View image 22
- View image 23
- View image 24
- View image 25
- View image 26
- View image 27
- View image 28
- View image 29
- View image 30
- View image 31
- View image 32
- View image 33
- View image 34
- View image 35
- View image 36
- View image 37
- View image 38
- View image 39
- View image 40
- View image 41
- View image 42
- View image 43
- View image 44
- View image 45
- View image 46
- View image 47
- View image 48
- View image 49
- View image 50
- View image 51
- View image 52
- View image 53
- View image 54
- View image 55
- View image 56
- View image 57
- View image 58
- View image 59
- View image 60
- View image 61
- View image 62
- View image 63
- View image 64
- View image 65
- View image 66
- View image 67
- View image 68
- View image 69
- View image 70
- View image 71
- View image 72
- View image 73
- View image 74
- View image 75
- View image 76
- View image 77
- View image 78
- View image 79
- View image 80
- View image 81
- View image 82
- View image 83
- View image 84
- View image 85
- View image 86
- View image 87
- View image 88
- View image 89
- View image 90
- View image 91