@rmpenterprise/rmpe-gallery v0.1.1

rmpe-gallery

Description

A lightbox component for company media including video and images.

See Glightbox https://biati-digital.github.io/glightbox/.

The rmpe-gallery is a wrapper based on Glightbox.

Two components

import { MediaGallery, VideoGallery } from '@rmpenterprise/rmpe-gallery';

Media Gallery: Component for Images and Video content.

Video Gallery: Component for Video content only.

Project setup

npm install

Usage

...
<media-gallery :media="media" />
<video-gallery :media="videos" />
...

import { MediaGallery, VideoGallery } from '@rmpenterprise/rmpe-gallery';

eport default {
  components: {
    'media-gallery: MediaGallery,
    'video-gallery: VideoGallery
  }
}

Example props format for MediaGallery

 data() {
    return {
      media: {
        videos: {
          regular: [
            {
              url: 'https://www.youtube.com/embed/YZiYoKHuMxU',
              thumbnails: { default: '../../../../images/signupbg.png' },
            },
          ],
          feature: {
            url: 'https://www.youtube.com/embed/YZiYoKHuMxU',
            thumbnails: { hqdefault: 'https://d3qcvwgx8ldkf2.cloudfront.net/home-banners/internal/banner-asset.png' },
          },
        },
        images: [
          { full: 'https://d1o3uysj4jtp1v.cloudfront.net/rma-production/uploads/2020/01/NAW-Blog-Header-2020-1-150x150.png', 
            thumbnail: 'https://d1o3uysj4jtp1v.cloudfront.net/rma-production/uploads/2020/01/NAW-Blog-Header-2020-1-150x150.png' },
        ],
      },
    };
  },

Example props format for VideoGallery

 data() {
    return {
      videos: {
        show_play_featured_button: true,
        feature: {
          url: 'https://youtube.com/embed/658Q6SRAiI8',
          thumbnails: {
            default: 'http://img.youtube.com/vi/658Q6SRAiI8/default.jpg',
            hqdefault: 'http://img.youtube.com/vi/658Q6SRAiI8/hqdefault.jpg',
            mqdefault: 'http://img.youtube.com/vi/658Q6SRAiI8/mqdefault.jpg',
            sddefault: 'http://img.youtube.com/vi/658Q6SRAiI8/sddefault.jpg',
            maxresdefault: 'http://img.youtube.com/vi/658Q6SRAiI8/maxresdefault.jpg',
          },
        },
        regular: [
          {
            url: 'https://youtube.com/embed/wUl436kbHuE',
            thumbnails: {
              default: 'http://img.youtube.com/vi/wUl436kbHuE/default.jpg',
              hqdefault: 'http://img.youtube.com/vi/wUl436kbHuE/hqdefault.jpg',
              mqdefault: 'http://img.youtube.com/vi/wUl436kbHuE/mqdefault.jpg',
              sddefault: 'http://img.youtube.com/vi/wUl436kbHuE/sddefault.jpg',
              maxresdefault: 'http://img.youtube.com/vi/wUl436kbHuE/maxresdefault.jpg',
            },
          },
        ],
      },
    };
  },