This article, explains about 360-degree image previewer in the vue.js application using the 'vue-360' plugin.
Now clean up all the existing code in the 'HelloWorld.vue' component add the below code:
Overview On 'vue-360' Library:
Some of the key features of the 'vue-360' library are:
amount - total number of image count that is used to display the 360-degree image preview.
imagePath - need to specify the relative path or full domain path without the image name.
fileName - need to specify the file name.
spinReverse - boolean property used to rotate the images in reverse order. The default value is false.
autoplay - autoplay your images. The default value is '24' images.
loop - number of loops you want for autoplay. The default value is '1'.
boxShadow- apply a box-shadow background. The default value is 'false'.
buttonClass - apply styling to buttons. The default value is 'light'.
paddingIndex - apply leading zero to image index. The default value is 'false'.
disableZoom - disabling zoom functionality. The default value is 'false'.
ScrollImage - Scroll images instead of default zoom. The default value will be 'false'.
Create A Sample Vue 2.0 Application:
The 'vue-360' library works fine with Vue 2.0 application, at the time of the article creation this plugin is not working with Vue 3.0 might be supported in future releases.
Install 'vue-360' Library:
npm install vue-360
Configure Font-Awsome Icons:
The 'vue-360' library adds some action buttons like 'Play', 'Next Image', 'Previous Image', etc. For these buttons, the library uses font-awsome icons. So we need to add a font-awesome CSS file to render those action buttons. Add the CSS file in the 'public/index.html' page inside of the HTML header tag.
public/index.html:(inside of the Html header tag)
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
Prepare Images To Use In 360-Degree Vue Component:
Normally images can be saved within our own application and consume or can consume other website images(websites are hosted only for images).
For this sample, I'm saving images within my vuejs application. The area we will store is inside of the 'public' folder.
We should have a collection of images with different angles to frame 360-degree image animation. And one important rule we have to follow is each image name should contain a number, that number defines the order for images to frame the 360-degree animation.Configure 'vue-360' Library Vue Component And CSS:
Now we have to configure 'VueThreeSixty' component in the main.js file. The main.js file is the entry file for the application, so any configuration made in this file called a global or root configuration. Need to import the 'vue-360' library CSS file on the main.js.
src/main.js:
import Vue from 'vue' import App from './App.vue' import VueThreeSixty from 'vue-360' import 'vue-360/dist/css/style.css' Vue.use(VueThreeSixty) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
- (Line: 3) Loading 'VueThreeSixty' component from 'vue-360' library.
- (Line: 5) Imported CSS reference of 'vue-360' library.
- (Line: 7) Configured 'VueThreeSixty' component into the application 'Vue' instance.
Render 'vue-360' Vue Component:
The 3 main input properties to configuration 'vue-three-sixty' component are 'amount', 'imagePath', 'filename'.
Now clean up all the existing code in the 'HelloWorld.vue' component add the below code:
src/components/HelloWorld.vue:(Html Part)
<template> <div > <vue-three-sixty :amount="16" imagePath="./bike360" fileName="bike-{index}.webp" /> </div> </template>
- The 'vue-three-sixty' is a vue component derived from the 'vue-360' library.
- (Line: 4) The property 'amount' set with a value to '16'. This count value is the number of images to frame the 360-degree animation.
- (Line: 5) The property 'imagePath'. If you are using different domain images then use the entire image URL by excluding the image name in the URL. If you are using images within the application that are saved in the 'public' folder then use the folder path inside of the 'public' folder. Here for this sample, I stored images inside of the 'bike360' folder that saved inside of the 'public' folder. So my in case 'imagePath' value will be './bike360'.
- (Line: 6) The property 'fileName'. Here I mentioned image's name should contain a number to determine the order of the images. So number value passed dynamically by the 'vue-three-sixty' component by using its context variable 'index'.
- So 'vue-three-sixty' component loads images inside of the 'imagePath' specified then it creates a nice 360-degree image animation.
Video Session:
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information about integrating the 'vue-360' library for the image previewer component in VueJS application. I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment