vue-tinybox
Advanced tools
Readme
A slick, yet tiny lightbox gallery component for Vue.js
The live demo can be found at https://os.karamoff.ru/vue-tinybox
Install the module as you normally would via npm or yarn:
npm install vue-tinybox
# or
yarn add vue-tinybox
Just include the link to the Tinybox in your <head>:
<script src="path/to/vue.js"></script>
<script src="path/to/tinybox.umd.js"></script>
If you're using the Tinybox not from the browser, you'll have to import it:
import Tinybox from "vue-tinybox";
Then you include it your usual way:
Vue.component('tinybox', Tinybox);
// or
Vue.use(Tinybox);
// or, inside a Vue instance or SFC
{
components: { Tinybox }
}
Then you can use the Tinybox component:
<Tinybox
:images="images"
:index="idx"
@close="idx = null"
/>
The Tinybox component accepts these props:
| Prop name | Type | Default | Description |
|---|---|---|---|
images | Array | [] | The array of either image URLs or Image objects |
index | Number / null | null | The index of the image that has to be shown. If null, the lightbox is closed |
loop | Boolean | false | Indicates whether the images should loop |
The Image object is an object with following fields:
| Field name | Type | Description |
|---|---|---|
src | String | The URL of the image |
alt | String | (optional) The text to be set inside alt attribute, e.g. a caption |
thumbnail | String | (optional) The URL of the smaller version of the image to be shown in the thumbnail strip |
FAQs
A slick, yet tiny lightbox gallery for Vue.js
We found that vue-tinybox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.