@mediaman/angular-three-sixty

360° Angular component

Stats

StarsIssuesVersionUpdatedCreatedSize
@mediaman/angular-three-sixty
300.0.83 years ago4 years agoMinified + gzip package size for @mediaman/angular-three-sixty in KB

Readme

angular-three-sixty

Angular 360° component using the three-sixty library.

Build Status npm version

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');
    }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.