Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/diracleo/vue-enlargeable-image
A Vue component that, when clicked, will enlarge an image from thumbnail to full version using a smooth animation.
https://github.com/diracleo/vue-enlargeable-image
javascript npm npm-package vue vuejs vuejs-components
Last synced: about 2 months ago
JSON representation
A Vue component that, when clicked, will enlarge an image from thumbnail to full version using a smooth animation.
- Host: GitHub
- URL: https://github.com/diracleo/vue-enlargeable-image
- Owner: diracleo
- Created: 2020-09-03T23:17:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-08T18:15:22.000Z (over 4 years ago)
- Last Synced: 2024-11-07T13:04:17.028Z (about 2 months ago)
- Topics: javascript, npm, npm-package, vue, vuejs, vuejs-components
- Language: Vue
- Homepage:
- Size: 29 MB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-enlargeable-image
A Vue component that, when clicked, will enlarge an image from thumbnail to full version using a smooth animation.
## Features
* Specify both a thumbnail source and a full size source
* Thumbnail version will load immediately
* Full version will load upon enlargement and is transformed seamlessly from the thumbnail version
* Specify the duration of the animation
* Nest any component or HTML element within - doesn't have to be just an img element (keep reading to learn more)
* Style the component however you want with your own CSS class definitions (keep reading to learn more)
* Choose whether the enlargement is triggered by click or hover
## Requirements
- [Vue.js](https://github.com/vuejs/vue)
## Installation
### npm
```bash
$ npm install @diracleo/vue-enlargeable-image
```
### external script
```html
```
## Usage
main.js:
```javascript
import Vue from 'vue'
import App from './App.vue'
import EnlargeableImage from '@diracleo/vue-enlargeable-image';
Vue.use(EnlargeableImage)
new Vue({
el: 'body',
components: {
App
}
})
```
template:
```html
```
specifying that the enlargement occurs as a result of hover instead of click
```html
```
nesting a custom HTML element instead of the default img:
```html
Click me to see the image
```
nesting another component instead of the default img (and setting the animation duration):
```html
```
## Properties
| Property | Type | Default | Required | Description |
| ------------------ | --------------------------- | ----------------- | -------- | ---------------------------------------- |
| src | String | N/A | *yes* | Relative path or absolute URL to the thumbnail image |
| src_large | String | N/A | *yes* | Relative path or absolute URL to the full size image |
| animation_duration | Integer | 700 | *no* | How many milliseconds that the enlarging and delarging animation will take (0 for no animation) |
| trigger | String ("click" or "hover") | click | *no* | Type of user interaction that triggers the enlargement (currently "click" or "hover") |
## Events
| Name | Arguments | Description |
| ------------- | ---------------------------------------- | ----------------------------------------- |
| **enlarging** | None | Fired when image starts to get bigger |
| **enlarged** | None | Fired when image has reached full size |
| **delarging** | None | Fired when image starts to get smaller |
| **delarged** | None | Fired when image is back to original size |
## Styling the component
```CSS
/* your passed-in element */
.enlargeable-image > .slot {
display:inline-block;
max-width:100%;
max-height:100%;
cursor:zoom-in;
}
/* default img if no element passed in */
.enlargeable-image > .slot > img.default {
max-width:100%;
vertical-align:middle;
}
/* passed-in element when growth is happening */
.enlargeable-image.active > .slot {
opacity:0.3;
filter:grayscale(100%);
}
/* full version that grows (background image allows seamless transition from thumbnail to full) */
.enlargeable-image .full {
cursor:zoom-out;
background-color:transparent;
align-items:center;
justify-content:center;
background-position: center center;
background-repeat:no-repeat;
background-size:contain;
display:none;
}
.enlargeable-image .full > img {
object-fit:contain;
width:100%;
height:100%;
}
/* full version while getting bigger */
.enlargeable-image .full.enlarging {
display:flex;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:transparent;
cursor:zoom-out;
z-index:3;
}
/* full version while at its peak size */
.enlargeable-image .full.enlarged {
display:flex;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:transparent;
cursor:zoom-out;
z-index:2;
}
/* full version while getting smaller */
.enlargeable-image .full.delarging {
display:flex;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:transparent;
cursor:zoom-in;
z-index:1;
}
```