🌌 A slick, yet tiny lightbox gallery for Vue.js https://os.karamoff.dev/vue-tinybox/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

176 lines
4.8 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A slick, yet tiny lightbox gallery for Vue.js">
<meta name="keywords" content="vue,vuejs,vue.js,lightbox,gallery,component,javascript">
<meta name="author" content="Nikita Karamov">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-tinybox | A slick, yet tiny lightbox gallery for Vue.js</title>
<link rel="preconnect" href="https://picsum.photos/">
<link rel="stylesheet" href="awsm.opt.min.css">
<style>
.open-tinybox {
display: inline-block;
cursor: pointer;
margin: 5px;
width: 100px;
}
</style>
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
</head>
<body>
<header>
<p>
<img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f30c.png" width="64" height="64" alt="Milky Way emoji">
</p>
<h1>vue-tinybox</h1>
<p>A slick, yet tiny lightbox gallery for Vue.js</p>
<nav>
<ul>
<li>
<a href="https://www.npmjs.com/package/vue-tinybox" target="_blank" rel="noopener noreferrer">npm</a>
</li>
<li>
<a href="https://github.com/NickKaramoff/vue-tinybox" target="_blank" rel="noopener noreferrer">github</a>
</li>
</ul>
</nav>
</header>
<main>
<article>
<h2>
<a id="what-is-it" href="#what-is-it" aria-hidden="true"></a>
What is it?
</h2>
<p>
Tinybox is a simple lightbox gallery for Vue.js.
</p>
<p>
While being not as customizable as some other
lightboxes, Tinybox is very slick and lightweight (3&nbsp;KB minzipped). Tinybox is
great on mobile devices too: it supports swipe gestures and changes its size responsively.
</p>
<aside>
<p>
the size of Tinybox is controlled with
<a href="https://github.com/ai/size-limit" target="_blank" rel="noopener noreferrer">Size Limit</a>
</p>
</aside>
<pre><code>&lt;Tinybox
v-model="index"
:images="images"
/&gt;</code></pre>
</article>
<article id="demo-app">
<h2>
<a href="#demo" id="demo" aria-hidden="true"></a>
Demo
</h2>
<p>Click on any image below to open Tinybox</p>
<Tinybox v-model="index" :images="images"></Tinybox>
<img
v-for="(img, idx) in images"
:src="img.thumbnail"
:alt="img.alt"
class="open-tinybox"
@click="index = idx"
>
</article>
<article>
<h2>
<a href="#install" id="install" aria-hidden="true"></a>
Install
</h2>
<h3>Browsers</h3>
<p>
Include the link to Tinybox in <code>&lt;head&gt;</code> alongside Vue.js:
</p>
<pre><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue-tinybox"&gt;&lt;/script&gt;</code></pre>
<h3>Node.js</h3>
<p>
Install the Tinybox package and register it as you usually would:
</p>
<pre><code>$ npm install vue-tinybox</code></pre>
<pre><code>import Tinybox from "vue-tinybox";
Vue.component('Tinybox', Tinybox);</code></pre>
</article>
<article>
<h2>API and more</h2>
<p>
For API docs and more info on installation consult the
<a href="https://github.com/NickKaramoff/vue-tinybox#readme" rel="noopener noreferrer">README</a>.
</p>
</article>
</main>
<footer>
<p>vue-tinybox by <a href="https://karamoff.dev" target="_blank" rel="noopener noreferrer">Nikita Karamov</a></p>
<p>Website built with <a href="https://igoradamenko.github.io/awsm.css/index.html" target="_blank" rel="noopener noreferrer">awsm.css</a></p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/vue-tinybox@1.3/dist/tinybox.umd.js"></script>
<script>
window.onload = function () {
new Vue({
components: { Tinybox },
el: '#demo-app',
data: function () {
return {
images: [
{
src: "https://picsum.photos/id/13/600/1000",
alt: "Empty beach",
caption: "Beach",
thumbnail: "https://picsum.photos/id/13/200"
},
{
src: "https://picsum.photos/id/42/800/600",
alt: "Desk in a café",
caption: "Café",
thumbnail: "https://picsum.photos/id/42/200"
},
{
src: "https://picsum.photos/id/256/1500/600",
alt: "Mountains range",
caption: "Mountains",
thumbnail: "https://picsum.photos/id/256/200"
},
{
src: "https://picsum.photos/id/666/800/600",
alt: "Green trees in forest",
caption: "Forest",
thumbnail: "https://picsum.photos/id/666/200"
}
],
index: null
}
}
});
}
</script>
</body>
</html>