DCzajkowski / Vue Pure Lightbox
Licence: mit
Very simple lightbox plugin (without any dependencies) for Vuejs 🌅
Stars: ✭ 142
Programming Languages
javascript
184084 projects - #8 most used programming language
js
455 projects
Projects that are alternatives of or similar to Vue Pure Lightbox
Natural Gallery Js
A lazy load, infinite scroll and natural layout list gallery
Stars: ✭ 93 (-34.51%)
Mutual labels: hacktoberfest, gallery, lightbox
Spotlight
Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
Stars: ✭ 799 (+462.68%)
Mutual labels: gallery, lightbox
Glightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
Stars: ✭ 702 (+394.37%)
Mutual labels: gallery, lightbox
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (+654.23%)
Mutual labels: hacktoberfest, vuejs2
Vuelayers
Web map Vue components with the power of OpenLayers
Stars: ✭ 532 (+274.65%)
Mutual labels: hacktoberfest, vuejs2
Lightgallery.js
Full featured JavaScript image & video gallery. No dependencies
Stars: ✭ 5,168 (+3539.44%)
Mutual labels: gallery, lightbox
Android Image Picker
Image Picker for Android 🤖
Stars: ✭ 847 (+496.48%)
Mutual labels: hacktoberfest, gallery
Vue Storefront Api
Vue.js storefront for Magento2 (and not only) - data backend
Stars: ✭ 328 (+130.99%)
Mutual labels: hacktoberfest, vuejs2
Nextcloud Vue
🍱 Vue.js components for Nextcloud app development ✌
Stars: ✭ 89 (-37.32%)
Mutual labels: hacktoberfest, vuejs2
Nanogallery2
a modern photo / video gallery and lightbox [JS library]
Stars: ✭ 488 (+243.66%)
Mutual labels: gallery, lightbox
Storefront Ui
Customization-first, performance-oriented and elegant UI framework for eCommerce (and not only) based on Vue.js and Google Retail UX Playbook. Made with 💚 by Vue Storefront team and contributors.
Stars: ✭ 1,827 (+1186.62%)
Mutual labels: hacktoberfest, vuejs2
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (+193.66%)
Mutual labels: gallery, lightbox
React Grid Gallery
Justified image gallery component for React
Stars: ✭ 571 (+302.11%)
Mutual labels: gallery, lightbox
React Native Gallery Toolkit
Reanimated 2 powered gallery implementation
Stars: ✭ 379 (+166.9%)
Mutual labels: gallery, lightbox
Lychee
A great looking and easy-to-use photo-management-system you can run on your server, to manage and share photos.
Stars: ✭ 816 (+474.65%)
Mutual labels: hacktoberfest, gallery
Simple React Lightbox
A simple but functional light-box for React.
Stars: ✭ 265 (+86.62%)
Mutual labels: gallery, lightbox
Kiimagepager
The KIImagePager is inspired by foursquare's ImageSlideshow, the user may scroll through images loaded from the Web
Stars: ✭ 324 (+128.17%)
Mutual labels: hacktoberfest, gallery
Vee Validate
✅ Form Validation for Vue.js
Stars: ✭ 8,820 (+6111.27%)
Mutual labels: hacktoberfest, vuejs2
Vue Gmaps
Search places and address using Google Maps API
Stars: ✭ 108 (-23.94%)
Mutual labels: hacktoberfest, vuejs2
Pure JS lightbox component for Vue.js
Table of contents
Demo
The live demo is available here: https://codepen.io/DCzajkowski/pen/rzOErW.
Installation
With NPM:
npm i vue-pure-lightbox --save
With a CDN:
<!-- In <head> -->
<meta rel="stylesheet" href="https://unpkg.com/vue-pure-lightbox/dist/VuePureLightbox.css">
<!-- In <body>, after Vue import -->
<script src="https://unpkg.com/vue-pure-lightbox/dist/VuePureLightbox.umd.min.js"></script>
Usage
With an ES6 bundler (via NPM)
Importing a component
import VuePureLightbox from 'vue-pure-lightbox'
/* @vue/component */
export default {
components: {
// ...
VuePureLightbox,
},
}
Importing CSS styles
If you are using an ES6 bundler, you will need to manually import the styles.
Via an import
import styles from 'vue-pure-lightbox/dist/VuePureLightbox.css'
Via a <style> tag
<style src="vue-pure-lightbox/dist/VuePureLightbox.css"></style>
With a CDN
<script>
new Vue({
components: {
'vue-pure-lightbox': window.VuePureLightbox,
}
}).$mount('#app')
</script>
Simple example
<VuePureLightbox
thumbnail="/path/to/thumbnail.jpg"
:images="['/path/to/image1.jpg', '/path/to/image1.jpg']"
/>
Note: if you are not using a vue-loader (e.g. you are using a CDN), you have to use the kebab-case'ing for the component i.e.
<vue-pure-lightbox>instead of<VuePureLightbox>.
Example using content slot and custom loader
<VuePureLightbox
thumbnail="https://via.placeholder.com/350x150"
:images="[
{ link: 'https://placekitten.com/1080/910', alt: 'Cat 1' },
{ link: 'https://placekitten.com/1080/920', alt: 'Cat 2' },
]"
>
<div v-slot:loader>Loading…</div>
<div v-slot:content="{ url: { link, alt } }">
<img :src="link" :alt="alt">
</div>
</VuePureLightbox>
Note: if you are not using a vue-loader (e.g. you are using a CDN), you have to use the kebab-case'ing for the component i.e.
<vue-pure-lightbox>instead of<VuePureLightbox>.
Available props:
| Prop | Type | Value |
|---|---|---|
| thumbnail | string | Path to a file being your thumbnail |
| images | string[] or array | Array of paths to files visible in the lightbox |
| alternate-text | string | (Optional) alt="" text for your image |
| value | boolean | (Optional) reactive visibility prop |
| open-at-index | integer | (Optional) index of an image to show when opening the modal |
Available slots:
| Slot | Description | Default |
|---|---|---|
| content | DOM to be used in place of an image in the lightbox | <img> tag with src set to path |
| loader | DOM to be used when there is an image loading | LightboxDefaultLoader |
| icon-close | Icon to be used as a close button | × (×) |
| icon-previous | Icon to be used as the "next" arrow button |
 (svg) |
| icon-next | Icon to be used as the "previous" arrow button |
 (svg) |
| preview | DOM to be used in place of the default thumbnail | Clickable link with a thumbnail |
Contents
This package consists of just one .vue file. It is meant to be as small and simple as possible.
In return you get a <VuePureLightbox> Vue component that allows you to show images in a nice, responsive lightbox.
Supported keys:
- Arrow right - Go to the next image
- Arrow left - Go to the previous image
- Escape key - Close the modal
- Arrow up, Arrow down and a Space Bar - inactive when the lightbox is visible
CSS is being used in the component, but each class is prefixed with a lightbox keyword. You can overwrite them as you wish.
License
Issues
If you find any bug or problem with the plugin please open an issue or create a pull request on the Github repo.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].