Gallery Flip

Gallery Flip

Flipping images inside your app

$5.00

CodeExplorer

CodeExplorer

Member since 2016

Details

Version:
1.0
Ionic:
3.x  
Platforms:
iOS, Android  
Released:
2 years ago
Updated:
2 years ago
Category:
Plugins
Tags:
,

Gallery Flip for Angular v2+ and Ionic v2+ is the component for integrating gallery with image flipping transition into you app (demo).

Installation:

  • Download the zip file and unzip it;
  • Copy directory cde-gallery-flip and paste it into your project;
  • Import component in app.module.ts:

```javascript import { CdeGalleryFlipModule } from 'path/to/cde-gallery-flip'; ...

@NgModule({ declarations: [ ..., CdeGalleryFlipModule ], ... }) export class AppModule {} ```

Usage:

In your view, add:

html <!-- Other content --> <cde-gallery-flip [images]="images" [blockMaxWidth]="100" [blockMaxHeight]="100" [flipSpeed]="200" [waitTime]="2000"> </cde-gallery-flip> <!-- Other content -->

In case of using Ionic v4, import cde-gallery-flip.component.scss into global.scss:

scss @import 'path/to/cde-gallery-flip.component';

Options:
  • [images] (required array in format { url: string, width: number, height: number }[]) - images to be loaded and flipped inside gallery;
    • url - Url to the image;
    • width - Width of the image in px;
    • height - Height of the image in px;
  • [blockMaxWidth] (optional number, default is 50) - Max width in px of the flipped block inside image;
  • [blockMaxHeight] (optional number, default is 50) - Max height in px of the flipped block inside image;
  • [flipSpeed] (optional number, default is 30) - Speed of the block flip transition;
  • [waitTime] (optional number, default is 2000) - Time in milliseconds until transitioning to next image;