vue-my-photos
Advanced tools
Upgraded to support Vue 3 and still no dependencies required!
Inspired by vue-pure-lightbox, however I needed a framework that allowed for a gallery of thumbnails as well as filtering functionality.
Versions >= 3.0.0 are built for Vue 3.
If your project uses Vue 2, use vue-my-photos-1.1.1
Live demo available on Codepen
npm i vue-my-photos --save
<!-- In <body>, after Vue import -->
<script src="https://unpkg.com/vue-my-photos/dist/lightbox.min.js"></script>
In your App:
<script>
import Lightbox from "@/lightbox.vue";
// ...
export default defineComponent({
name: "VueMyPhotosDemo",
components: {
Lightbox,
},
// ...
})
</script>
Simply initiate a lightbox component with the lightbox tag:
<lightbox
id="myLightbox"
ref="mylightbox" * Now Optional
:images="images"
:current-image-name="currentImageName"
@on-lightbox-close="onLightboxClose"
:filter="galleryFilter" * Optional
:directory="thumbnailDir" * Optional
:timeout-duration=5000 * Optional
:close-on-backdrop-click="true" * Optional
@on-lightbox-change="onLightboxChange" * Optional
></lightbox>
Expose the appropriate data for the template:
data() {
return {
thumbnailDir: "/.../.../",
images: imageList,
galleryFilter: "all",
currentImageName: ""
};
},
Each thumbnail in the gallery registers a click event, passing the name of the photo:
<img @click="showLightbox('img.jpg')" src="..." alt="..." title="..." />
And add the showLightbox and onLightboxClose methods to your vue page (these can be named however you like):
showLightbox(imageName: string) {
this.currentImageName = imageName;
},
onLightboxClose(imageName: string) {
this.currentImageName = imageName;
},
To update which images show within the lightbox, update the filter string like so:
updateFilter(filterName) {
this.galleryFilter = filterName;
}
Previously, the lightbox was shown by accessing the component via the $refs object and calling the show method directly:
showLightbox: function(imageName) {
this.$refs.mylightbox.show(imageName);
}
This approach can still be done (and in Vue 3 using Ref() within the setup method), however, in an effort to decouple the Lightbox Component from its parent Component, the new recommended approach is detailed above using the currentImageName prop. This is a reactive property that will trigger the lightbox to display whenever its value is changed. A method that listens to the on-lightbox-close event must also be implemented in order to reset the value of currentImageName (Otherwise, if the user tries to open the lightbox with the same image twice in a row, currentImageName won't change and the lightbox won't open).
| Property | Type | Value |
|---|---|---|
| images (Required) | array | Array of objects with image data (example below) |
| currentImageName (Required) | string | Should initially be an empty string, then updated later to trigger lightbox |
| filter (Optional - Default: "all") | string | String to filter on specific images (Ex: "nature") |
| directory (Optional - Default: "") | string | Path to location of images (Ex: "/src/assets/") |
| timeoutDuration (Optional - Default: 3000) | integer | duration in ms of key/mouse inactivity before caption disappears |
| closeOnBackdropClick (Optional - Default: false) | boolean | toggle whether or not to close lightbox when clicking outside of image |
| Event | Description |
|---|---|
| onLightboxClose(imageName: string) | Fired every time the lightbox is closed. Must implement a method to update currentImageName with the value passed by this event |
| onLightboxChange(newImage: { name: string, alt: string, filter: string, id: string } | Fired every time the user advances the lightbox to the next or previous image. |
Example of images array:
var images = [{'name':'mountains.jpg', 'alt':'The Dolomites', 'filter':'nature', 'id':'image1' },
{'name':'bird.jpg', 'alt':'It is a bird', 'filter':'animals', 'id':'image2' }];
Note:
disable-scroll or similar module to prevent the user from scrolling while the lightbox is visible.
vue-fontawesome if you want to replace/re-style the svg icons for left/right arrows and close icon.
FAQs
Simple lightbox component for Vue 3 applications
The npm package vue-my-photos receives a total of 329 weekly downloads. As such, vue-my-photos popularity was classified as not popular.
We found that vue-my-photos 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.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.