NexOpt GmbH Components
  1. Components
  2. SpingalleryComponent

File

projects/components/src/lib/spingallery/spingallery.component.ts

Description

SpinGallery component

Visualizes images in 360 degrees

tag: no-spingallery

Implements

OnInit AfterViewInit

Metadata

selector no-spingallery
styleUrls ./spingallery.component.scss
templateUrl ./spingallery.component.html

Index

Methods
Inputs

Inputs

config
Type : any
Defined in projects/components/src/lib/spingallery/spingallery.component.ts:87

Data to present in spingallery

Simply pass in configuration

spingalleryConfig = {
  circleOffset: 5,
  zoom: 3,
  folderPath: 'https://scaleflex.airstore.io/demo/360-car/',
  filenames: 'iris',
  extension: 'jpeg',
  amount: 36,
  ratios: JSON.stringify({
    '576': '1.3',
    '768': '2.22',
    '992': '5.23',
    '1200': '2',
    '2400': '3.2',
  }),
}

if you have array you can create spingallery in js

const spingallery = document.querySelector('no-spingallery');
spingallery.spingalleryConfig = spingalleryConfig

Methods

ngAfterViewInit
ngAfterViewInit()
Defined in projects/components/src/lib/spingallery/spingallery.component.ts:102

Init of the spin library

Returns : void 
import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
import 'js-cloudimage-360-view';

/**
 * @ignore
 */
declare var CI360: any;

/**
 * SpinGallery interface to follow
 */
export interface SpinGallery {
  /**
   * offset of the circle underneath the item
   */
  circleOffset: number;

  /**
   * zoom number upon clicking zoom feature
   */
  zoom: number;

  /**
   * Folder path where the images are stored
   */
  folderPath: string;
  /**
   * Filename specification (all images should be in format <name>-<index>.<ext>)
   */
  filenames: 'iris';
  /**
   * Extension of the image
   */
  extension: 'jpeg';
  /**
   * Total number of images
   */
  amount: 36;
  /**
   * Ratios for responsiveness in stringiefied format
   */
  ratios: string;
}

/**
 * SpinGallery component
 *
 * Visualizes images in 360 degrees
 *
 * tag: no-spingallery
 */
@Component({
  selector: 'no-spingallery',
  templateUrl: './spingallery.component.html',
  styleUrls: ['./spingallery.component.scss'],
})
export class SpingalleryComponent implements OnInit, AfterViewInit {
  /**
   * Data to present in spingallery
   *
   * @example
   * Simply pass in configuration
   * ```
   * spingalleryConfig = {
   *   circleOffset: 5,
   *   zoom: 3,
   *   folderPath: 'https://scaleflex.airstore.io/demo/360-car/',
   *   filenames: 'iris',
   *   extension: 'jpeg',
   *   amount: 36,
   *   ratios: JSON.stringify({
   *     '576': '1.3',
   *     '768': '2.22',
   *     '992': '5.23',
   *     '1200': '2',
   *     '2400': '3.2',
   *   }),
   * }
   * ```
   *
   * if you have array you can create spingallery in js
   * ```
   * const spingallery = document.querySelector('no-spingallery');
   * spingallery.spingalleryConfig = spingalleryConfig
   * ```
   */
  @Input() config: any;

  /**
   * @ignore
   */
  constructor() {}

  /**
   * @ignore
   */
  ngOnInit(): void {}

  /**
   * Init of the spin library
   */
  ngAfterViewInit(): void {
    if (this.config) {
      CI360.init();
    }
  }
}

<div class="gallery">
  <div class="cloudimage-360" [attr.data-ratio]='config.ratios' data-spin-reverse data-bottom-circle [attr.data-bottom-circle-offset]="config.circleOffset" data-keys [attr.data-magnifier]="config.zoom" data-responsive="scaleflex" [attr.data-folder]="config.folderPath" [attr.data-filename-x]="config.filenames+'-{index}.'+config.extension" [attr.data-amount-x]="config.amount"></div>
</div>

./spingallery.component.scss 

:host {
  display: block;
  width: 100%;
  height: 100%;
  .gallery {
    display: block;
    width: 100%;
    height: 100%;
  }
  ::ng-deep .cloudimage-360-icons-container {
    position: absolute;
    display: flex;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 95%;
    flex-direction: column;
    align-items: center;
    z-index: 101;
  }

  ::ng-deep .cloudimage-360-magnifier-icon {
    width: 25px;
    height: 25px;
    margin-bottom: 5px;
    cursor: pointer;
    background: url("https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg")
      50% 50% / cover no-repeat;
  }

  ::ng-deep .cloudimage-360-fullscreen-icon {
    width: 25px;
    height: 25px;
    margin-bottom: 5px;
    cursor: pointer;
    background: url("https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg")
      50% 50% / cover no-repeat;
  }

  ::ng-deep .cloudimage-360-reset-zoom-icon {
    display: none;
    width: 30px;
    height: 30px;
    margin-top: auto;
    cursor: pointer;
    background: url("https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986")
      50% 50% / cover no-repeat;
  }

  ::ng-deep .cloudimage-360-close-fullscreen-icon {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: url("https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg")
      50% 50% / cover no-repeat;
  }

  ::ng-deep .cloudimage-360-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 0%;
    height: 8px;
    background-color: rgb(165, 175, 184);
    z-index: 100;
  }

  ::ng-deep .cloudimage-360-box-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
  }

  ::ng-deep .cloudimage-360-view-360-icon {
    display: none;
  }

  ::ng-deep .cloudimage-360-view-360-circle {
    position: absolute;
    left: 0;
    right: 0;
    width: 80%;
    height: auto;
    margin: auto;
    transition: 0.5s all;
    z-index: 2;
  }

  ::ng-deep .cloudimage-360-fullscreen-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #fff;
  }

  ::ng-deep .cloudimage-360-img-magnifier-glass {
    background-color: #fff;
    background-repeat: no-repeat;
    position: absolute;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: wait;
    line-height: 200px;
    text-align: center;
    z-index: 1000;
    width: 250px;
    height: 250px;
    top: -75px;
    right: -85px;
  }

  ::ng-deep .cloudimage-360 {
    .cloudimage-360-left,
    .cloudimage-360-right {
      padding: 8px;
      background: rgb(244, 244, 244);
      border: none;
      border-radius: 4px;
    }

    .cloudimage-360-left:focus,
    .cloudimage-360-right:focus {
      outline: none;
    }

    .cloudimage-360-left {
      display: none;
      position: absolute;
      z-index: 100;
      top: calc(50% - 15px);
      left: 20px;
    }

    .cloudimage-360-right {
      display: none;
      position: absolute;
      z-index: 100;
      top: calc(50% - 15px);
      right: 20px;
    }

    .cloudimage-360-left:before,
    .cloudimage-360-right:before {
      content: "";
      display: block;
      width: 30px;
      height: 30px;
      background: 50% 50% / cover no-repeat;
    }

    .cloudimage-360-left:before {
      background-image: url("https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg");
    }

    .cloudimage-360-right:before {
      background-image: url("https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg");
    }

    .cloudimage-360-left.not-active,
    .cloudimage-360-right.not-active {
      opacity: 0.4;
      cursor: default;
      pointer-events: none;
    }

    .cloudimage-360-top,
    .cloudimage-360-bottom {
      padding: 8px;
      background: rgb(244, 244, 244);
      border: none;
      border-radius: 4px;
    }

    .cloudimage-360-top:focus,
    .cloudimage-360-bottom:focus {
      outline: none;
    }

    .cloudimage-360-top {
      display: none;
      position: absolute;
      z-index: 100;
      left: calc(50% - 15px);
      top: 20px;
      transform: rotate(90deg);
    }

    .cloudimage-360-bottom {
      display: none;
      position: absolute;
      z-index: 100;
      left: calc(50% - 15px);
      bottom: 20px;
      transform: rotate(90deg);
    }

    .cloudimage-360-top:before,
    .cloudimage-360-bottom:before {
      content: "";
      display: block;
      width: 30px;
      height: 30px;
      background: 50% 50% / cover no-repeat;
    }

    .cloudimage-360-top:before {
      background-image: url("https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg");
    }

    .cloudimage-360-bottom:before {
      background-image: url("https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg");
    }

    .cloudimage-360-top.not-active,
    .cloudimage-360-bottom.not-active {
      opacity: 0.4;
      cursor: default;
    }
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""