kytta / vue-tinybox Goto Github PK
View Code? Open in Web Editor NEW๐ A slick, yet tiny lightbox gallery for Vue.js
Home Page: http://os.kytta.dev/vue-tinybox/
License: MIT License
๐ A slick, yet tiny lightbox gallery for Vue.js
Home Page: http://os.kytta.dev/vue-tinybox/
License: MIT License
Is your feature request related to a problem?
It would be great to have an event propagated when the component is closed
Describe the solution you'd like
Emit an event
Additional context
The reason behind this is my need to wrap the component into another component, where the index is passed down as prop. This prevents leaking the library to the whole codebase. But this issue I get with this is the mutation of the prop directly, I'm fine with this as long I was able to set that prop to null again (on the parent).
Arrows to go left and right and ESC to quit
This is an extension to #2
If the index is submitted via a prop and updated via an event, why not combine it into v-model
?
The Question
It's possible to show tinybox only inside a div ?
Additional context
I'm running in a admin template, with left sidebar, but tinybox stay below of the menu...
Even though the output file clearly says export default Tinybox;
, Nuxt keeps telling me stuff like export 'default' (imported as 'Tinybox') was not found in 'vue-tinybox'
.
The component itself doesn't really work properly in an SSR-environment; gotta look into it.
Right now the CSS remains unprefixed. I tried to use PostCSS and Autoprefixer by including the plugins inside postcssPlugins
option of rollup-plugin-vue, but wasn't successful
While I do not expect W3C to introduce a <tinybox>
HTML element, it's still bad practice to use single-word component names.
Ideas include:
TinyBox
(not my favourite, as I kinda image Tinybox as a single word)TinyboxGallery
TinyboxDisplay
Also some ideas by ChatGPT:
TinyboxPopup
TinyboxModal
TinyboxLightbox
TinyboxOverlay
TinyboxDialog
TinyboxWindow
TinyboxContainer
An extension to #2.
On mobile phones the photos are pinned to top instead of being in the middle.
A no-thumbs
prop would be enough
When navigating the images in the lightbox and the next/previous image is not cached, the previous image is being flashed.
First, Thank you for this tiny little gallery - very simple and useful.
Unfortunately didn't find any lazy load features.
It would be nice to:
For such simple images they are just too huge. It'd be nice to bring down the base64 size to 200 characters or less
Hi,
thank you for your great plugin. However we're approaching the point where the vue 2 have to be replaced with vue 3. Is there any chance for vue 3 support?
Best,
Robert
The docs page should:
Being heavily inspired by webflow's lightbox, the component has too many styles that are possibly not needed
On the develop
branch after all optimization, the animation of image switching is broken. The backdrop image matches the image that the lightbox is being changed to and the animation is always being played from the left side.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.