Home
Modal & Popup
Expand Images To Full Size – vue-expandable-image

Expand Images To Full Size – vue-expandable-image

TahaSh Last Updated: 3 years ago

expandable-image is a basic image lightbox component that expands the image to the fullsize on click/tap.

How to use it:

Install and import the vue-expandable-image component into your project.

import VueExpandableImage from 'vue-expandable-image'

Use the component.

<expandable-image 
  class="image" 
  src="1.jpg" 
  alt="dog" 
  title="dog">
</expandable-image>

Enable the component.

new Vue({
  el: '#app',
  mounted() {
    const viewportMeta = document.createElement('meta');
    viewportMeta.name = 'viewport';
    viewportMeta.content = 'width=device-width, initial-scale=1';
    document.head.appendChild(viewportMeta);
  } });

Preview:

 

Download Details:

Author: TahaSh

Live Demo: https://codepen.io/tahazsh/pen/aMbooL

Download Link: https://github.com/TahaSh/vue-expandable-image/archive/master.zip

Official Website: https://github.com/TahaSh/vue-expandable-image

Install & Download:

# NPM
$ npm install vue-expandable-image --save

Related Posts

Tags:

One Response

  1. hulu.com/activate June 10, 2020

    How can you Stream Hulu?

    To stream the Hulu you will need a streaming device and today most of the smart televisions have inbuilt hulu so you can directly use it
    without any further ado. If your device does not have inbuilt hulu, launch the app and sign in to it or you can use streaming stick
    to access hulu. Additionally you get 50 hours of online storage and you can get 200 hours online storage in $15.

    https://hulusecureactivate.com/

    Reply

Add Comment