Package Exports

@diracleo/vue-enlargeable-image

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@diracleo/vue-enlargeable-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

Installation

npm

$ npm install @diracleo/vue-enlargeable-image

external script

<script src="https://unpkg.com/@diracleo/vue-enlargeable-image/dist/vue-enlargeable-image.min.js"></script>

Usage

main.js:

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:

<enlargeable-image src="/path/to/thumbnail.jpg" src_large="/path/to/fullsize.jpg" />

specifying that the enlargement occurs as a result of hover instead of click

<enlargeable-image src="/path/to/thumbnail.jpg" src_large="/path/to/fullsize.jpg" trigger="hover" />

nesting a custom HTML element instead of the default img:

<enlargeable-image src="/path/to/thumbnail.jpg" src_large="/path/to/fullsize.jpg">
  <span>Click me to see the image</span>
</enlargeable-image>

nesting another component instead of the default img (and setting the animation duration):

<enlargeable-image src="/path/to/thumbnail.jpg" src_large="/path/to/fullsize.jpg" animation_duration="2000">
  <v-lazy-image src="/path/to/thumbnail.jpg" />
</enlargeable-image>

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

/* 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;
}