vue-3-fullscreen-image-directive-plugin v1.0.4
Vue 3 Fullscreen Image Directive Plugin
A lightweight Vue.js plugin for creating a fullscreen image modal with customizable options, that support panorama display.
Features
Lightweight: Our package is designed to be minimalistic and efficient, ensuring a small footprint without compromising functionality.
Panorama Support: Now supports panorama images! Pass an array of
imageUrlto create a panorama view.Accessible: We prioritize accessibility to ensure that our package can be easily used by everyone, including users with disabilities.
Abundant Options: With a plethora of customizable options, you have the flexibility to tailor the package to suit your specific needs. Explore the extensive set of features to enhance your development experience.
Responsive: Our package is built to be responsive, adapting seamlessly to various screen sizes and devices.
Installation
Install the package using npm:
npm install vue-3-fullscreen-image-directive-plugin
yarn add vue-3-fullscreen-image-directive-pluginUsage
Register the Plugin
import { createApp } from 'vue'
import App from './App.vue'
import { fullscreenImagePlugin } from './fullscreen-image-plugin'
import 'vue-3-fullscreen-image-directive-plugin/style.css' // Don't forget to import the style
createApp(App).use(fullscreenImagePlugin).mount('#app')Use the Directive
Add the v-fullscreen-image directive to any element you want to trigger the fullscreen image modal on click.
Single Image
<template>
<img v-fullscreen-image="{
imageUrl: 'https://placehold.co/2000x4000',
withDownload: false,
animation: 'blur'
}"
src="https://placehold.co/200x400"
/>
</template>Panorama Images
<template>
<img v-fullscreen-image="{
imageUrl: ['https://placehold.co/2000x4000', 'https://placehold.co/1100x1100'],
withDownload: true,
animation: 'blur',
}"
src="https://placehold.co/200x400"
/>
</template>Directive Options
| Name | Type | Description |
|---|---|---|
| imageUrl | (string, required) | The URL of the image to display |
| anchor | (string, optional, default: 'body') | Selector for the element to which the modal will be mounted. |
| animation | (string, optional, default: 'fade') | Animation type ('fade', 'blur', 'none'). |
| imageAlt | (string, optional) | Alt text for the image. |
| withDownload | (boolean, optional, default: true) | Show the download button. |
| withClose | (boolean, optional, default: true) | Show the close button. |
| withFocusOnClose | (boolean, optional, default: true) | Automatically focus on the close button when the modal opens. |
| withCloseOnEscape | (boolean, optional, default: true) | Close the modal when the 'Escape' key is pressed. |
| closeOnClickOutside | (boolean, optional, default: true) | Close the modal when clicking outside the image. |
| maxHeight | (string, optional, default: '80vh') | Maximum height of the image container. |
| maxWidth | (string, optional, default: '80vw') | Maximum width of the image container. |
| backdropColor | (string, optional, default: 'rgba(0, 0, 0, 0.7)') | Color of the modal backdrop. |
Author
This npm package is developed and maintained by Anatole Acqueberge, feel free to contibute.
License
This project is licensed under the MIT License