Gallery Grid

Gallery Grid

Responsive gallery in your app

$10.00

CodExplorerLegacy

CodExplorerLegacy

Member since 2015

Details

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

Gallery Grid for Angular v2/v4 and Ionic v2/v3 is the component for integrating responsive gallery into you app (demo).

Installation:

  • Download the zip file and unzip it;
  • Copy files from mama-gallery-grid/src and paste them into src folder within your project;
  • Import component in app.module.ts:

```javascript import { MamaGalleryGrid } from 'path/to/mama-gallery-grid'; ...

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

Usage:

In your view, add:

html <!-- Other content --> <mama-gallery-grid> <img *ngFor="let image of images" [src]="image.url" [attr.data-image-width]="image.width" [attr.data-image-height]="image.height"> </mama-gallery-grid> <!-- Other content -->

Options:
  • [breakingRules] (optional array in format { maxWidth: number, maxColumns: number }[]) - rules by which images will be broken to rows inside the gallery;
    • maxWidth - Width of the gallery component;
    • maxColumns - Number of columns in the gallery when gallery width is lower than maxWidth;

Default value:

javascript [ { maxWidth: 480, maxColumns: 1 }, { maxWidth: 1024, maxColumns: 2 }, { maxWidth: Number.MAX_VALUE, maxColumns: 3 } ]

  • [spacing] (optional number, default is 0) - spacing between images;
  • Content elements/images need to have data-image-width and data-image-height attributes with values set to original dimensions of an image.

Currently gallery works same with any HTML element (works with any element that controls sizing through css properties). If you want to implement custom HTML element inside the gallery, do following steps: * Import ItemAdapter, ItemStylingOptions and registerItemAdapter from mama-gallery-grid; * Create class MyItemAdapter that implements ItemAdapter; * Add instance of MyItemAdapter to registerItemAdapter; Sample:

```javascript import { ItemAdapter, ItemStylingOptions, registerItemAdapter } from 'path/to/mama-gallery-grid';

class MyItemAdapter implements ItemAdapter { styleElement(element:any, options:ItemStylingOptions) { element.widthProperty = ${options.width}px; element.heightProperty = ${options.height}px; element.marginTopProperty = ${options.marginTop}px; element.marginLeftProperty = ${options.marginLeft}px; element.style.display = 'block'; element.style.float = 'left'; } }

registerItemAdapter('my-custom-element', new MyItemAdapter()); ```