angular-three-sixty

Angular 360° component using the three-sixty library.

Installation

npm install --save @mediaman/angular-three-sixty

Importing library

You need to import the module in your application:

import { NgModule } from '@angular/core';
import { ThreeSixtyModule } from '@mediaman/angular-three-sixty';

@NgModule({
    imports: [ThreeSixtyModule]
});
export class AppModule {
}

Usage

Basic usage

import { Component } from '@angular/core';

@Component({
    selector: 'product-page',
    template: `<mm-three-sixty [width]="1280"
                [height]="720"
                [angles]="36" 
                [anglesPerImage]="6" 
                [images]="threeSixtyImages" 
                [preload]="true"></mm-three-sixty>`
})
export class ProductPageComponent {
    public threeSixtyImages: string[] = [
        'http://example.com/image-0.jpg',
        'http://example.com/image-1.jpg',
        'http://example.com/image-2.jpg',
        'http://example.com/image-3.jpg',
        'http://example.com/image-4.jpg',
        'http://example.com/image-5.jpg'
    ];
}

Alter the speed

The default speed factor is set to 5. You can change it with the speedFactor input.

import { Component } from '@angular/core';

@Component({
    selector: 'product-page',
    template: `<mm-three-sixty [width]="1280"
                [height]="720"
                [angles]="36" 
                [anglesPerImage]="6" 
                [images]="threeSixtyImages"
                [speedFactor]="1"
                [preload]="true"></mm-three-sixty>`
})
export class ProductPageComponent {
    public threeSixtyImages: string[] = [
        'http://example.com/image-0.jpg',
        'http://example.com/image-1.jpg',
        'http://example.com/image-2.jpg',
        'http://example.com/image-3.jpg',
        'http://example.com/image-4.jpg',
        'http://example.com/image-5.jpg'
    ];
}

Hotspots

You can show hotspots at defined angles to advertise the viewed product better.

import { Component } from '@angular/core';
import { HotspotInterface } from '@mediaman/three-sixty/dist/interfaces/hotspot.interface';

@Component({
    selector: 'product-page',
    template: `<mm-three-sixty [width]="1280"
                [height]="720"
                [angles]="36" 
                [anglesPerImage]="6" 
                [images]="threeSixtyImages"
                [hotspots]="hotspots"
                [preload]="true"></mm-three-sixty>`
})
export class ProductPageComponent {
    public threeSixtyImages: string[] = [
        'http://example.com/image-0.jpg',
        'http://example.com/image-1.jpg',
        'http://example.com/image-2.jpg',
        'http://example.com/image-3.jpg',
        'http://example.com/image-4.jpg',
        'http://example.com/image-5.jpg'
    ];
    
    public hotspots: HotspotInterface[] = [
        {
            text: 'Lorem ipsum 1',
            angle: 0.78,
            endAngle: 0.95,
            top: '25%',
            left: '27.5%'
        },
        {
            text: 'Lorem ipsum 2',
            angle: 0.4,
            endAngle: 0.6,
            top: '65%',
            left: '60%'
        }
    ];
}

Events

preloaded

If you set the input parameter preload to true, the preload output event gets triggered when all three sixty images are loaded.

This can be usefull if you want to implement a loading indicator.

import { Component } from '@angular/core';

@Component({
    selector: 'product-page',
    template: `<mm-three-sixty [width]="1280"
                [height]="720"
                [angles]="36" 
                [anglesPerImage]="6" 
                [images]="threeSixtyImages" 
                [preload]="true" 
                (preloaded)="onPreloaded()"></mm-three-sixty>`
})
export class ProductPageComponent {
    public threeSixtyImages: string[] = [
        'http://example.com/image-0.jpg',
        'http://example.com/image-1.jpg',
        'http://example.com/image-2.jpg',
        'http://example.com/image-3.jpg',
        'http://example.com/image-4.jpg',
        'http://example.com/image-5.jpg'
    ];
    
    public onPreloaded() {
        console.log('ready to go');
    }
}