diff options
| -rw-r--r-- | README.md | 38 |
1 files changed, 31 insertions, 7 deletions
@@ -15,12 +15,11 @@ Then import it as a module: ```html <script type="module"> import LightBox from '/dist/libra.min.js'; - new LightBox({ selector: 'img[data-libra]' }); - // specify your own selector if needed + new LightBox(); </script> ``` -Make sure your images all have their `data-libra` attribute, or any other selector you've just specified. +Make sure your images all have their `data-libra` attribute, or any other selector you may specify in configuration. ```html <div class="libra"> @@ -36,15 +35,40 @@ Also, include [libra.css](https://github.com/BigCoke233/libra/blob/master/src/li <link rel="stylesheet" href="/src/libra.css" /> ``` +## Configuration + +You can configure Libra.js by passing an object to the constructor. The defaults are: + +```js +new LightBox({ + selector: '[data-libra]', // Selector for images to be lightboxed + margin: 50, // Margin around the lightbox + offset: { x: 0, y: 0 } // Offset for the lightbox position +}); +``` + ## Development ``` npm install -npm run test +npm run build ``` -The `test` command runs Parcel in watch mode. +## Philosophy + +### Why I made Libra.js + +I've been using [Fancybox](https://fancyapps.com/fancybox/) on my blog for a long time. While it is an excellent library, it also includes lots of features I don't need, which can slow down performance and increase the bundle size. After searching available alternatives, I found most of them either not well maintained or just as heavy. So I developed Libra.js for my own use, and I hope you find it useful, too! + +### Things I won't do with Libra.js + +- I won't support IE or older browsers. Please use a modern browser and make sure it's up to date. +- I won't add too many features or configurations for customization. You just click on an image and see the zoomed-in and centered version. That's all. + +### Why it's called Libra.js + +It's a light-box plugin that focuses on simplicity, so I called it "libo" at first, which is a combination of the first 2 letters of "light" and "box". Then I realized that "libo" sounds a lot like "libra", which is a zodiac sign. I decided to keep the name "libra" because it's a more recognizable and memorable name. -## Why? +## License -I've been using [Fancybox](https://fancyapps.com/fancybox/) for a long time. While it is an excellent library, it also includes lots of features I don't need. After searching available alternatives, I found most of them either not well maintained or just as heavy. So I developed Libra.js for my own use, and I hope you find it useful, too! +MIT |