vue-3-fullscreen-image-directive-plugin

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 imageUrl to 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-plugin

Usage

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