@sedeh/gallery-lift v3.0.1

Welcome to gallery lift!

Have you ever wanted a gallery view that can display images and videos the way you want it? gallery lift is a configurable tool that allows you to pick and choose how your gallery is displayed.

NOTE: Added appRootName attribute for ADA compliancy to be used for turning off all key actions when lift modal view is displayed. Default value for appRootName is app-root. When the modal gallery lift is created, it will be pushed in root body tag siblling to the angualr app root. If you are using a different tag name other than app-root, you should pass it to gallery-lift component.

Please send your requests or comments through the link provided below:

Live Demo | NPM | Comments/Requests

DEPENDENCIES: 
	"font-awesome": "^4.7.0", 

Sample Use

<gallery-lift
  [hoverMessage]="hoverMessage"
  [sideBySide]="true"
  [appRootName]="app-root"
  [animationType]="animationType"
  [showMessageOnHover]="showMessageOnHover"
  [magnifyImageEnabled]="magnifyImageEnabled"
  [maxHeight]="maxHeight"
  [showTitleOnHover]="showTitleOnHover"
  [layout]="viewOption"
  [borderOnView]="1px solid white"
  [liftOnZero]="liftOnZero"
  [showRemainingCount]="showRemainingCount"
  [template]="myTeplate"
  [gallery]="myGallery"
  (onaction)="onaction($event)"
  (onselect)="onselect($event)"></gallery-lift>

<ng-template #myTeplate let-detail="data" let-current="selected" let-total="total">
    <span>{{current}} of {{total}}</span>
    <h3>{{detail.title}}</h3>
    <p>{{detail.description}}</p>
</ng-template>

Attributes

Layouts

Events

You can register to receive the following events:

Data Entry Interface

{
  data?: {        // content describing the imagery
    title?: string,
    description: string
  },
  type?: string,  // if undefined, defaults to image
  src: string,     // url of image or video
  poster?: string  // image url to be displayed in place of video startup image
}

// If you want the video display be handled correcly on mobile, 
// **poster** attribute will become a **mandatory** field.

Sample data

  myGallery= [{
    data: {
      title: "Tydings Park",
      description: 'Tydings Memorial Park is the perfect location for outdoor fun, ranging from a picnic to a day relaxing on the bay.  Located on Commerce Street, Tydings Park features 22 acres overlooking the water.'
    },
    type: 'image',
    src: "https://havredegracemd.gov/wp-content/uploads/2014/05/Tydings-Park-Havre-de-Grace-Maryland.jpg"
  },
  {
    data: {
      title: "Bute Park",
      description: 'Bute Park is a major park in the city of Cardiff, capital of Wales. It comprises 130 acres (53 ha) of landscaped gardens and parkland that once formed the grounds of Cardiff Castle. The park is named after the 3rd Marquess of Bute, whose family owned the castle.'
    },
    type: 'image',
    src: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Bute_Park%2C_Cardiff.jpg/800px-Bute_Park%2C_Cardiff.jpg"
  },
  {
    data: {
      title: "Yosemite Park",
      description: 'Yosemite National Park is in California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoia trees, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome. In Yosemite Village are shops, restaurants, lodging, the Yosemite Museum and the Ansel Adams Gallery, with prints of the photographer’s renowned black-and-white landscapes of the area.'
    },
    type: 'video',
    src: "https://s3.amazonaws.com/freestock-transcoded-videos-prod/transcoded/freestock_v2680286.mp4",
    poster: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Nevada_Fall%2C_Yosemite_NP%2C_CA%2C_US_-_Diliff.jpg/800px-Nevada_Fall%2C_Yosemite_NP%2C_CA%2C_US_-_Diliff.jpg"
  },
  {
    data: {
      title: "Atlantic Park",
      description: 'Atlantic Park is just 1,300 feet from Mallorca’s Magalluf Beach. It includes a lagoon-style swimming pool and air conditioned rooms with a private balcony and cable TV.'
    },
    type: 'image',
    src: "https://q-fa.bstatic.com/images/hotel/max1024x768/126/12642274.jpg"
  }
  ];

Revision History