Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

rooverlay

1.2.3 • Public • Published

rooverlay

npm version Build Status codecov.io

Overlay library that displays image/video galleries, html or iframes.

Dependencies

This library has no dependencies and still weights just ~15 KB unminified.

Compatibility

Recent browsers such as: IE 8+, Safari, Firefox & Chrome.

Install

$ npm install --save rooverlay

Usage

Below is a example of usage.

Image Gallery

var Rooverlay = require('rooverlay');
 
var rooverlay = new Rooverlay({
  loop: true,
  slides: [{
    type: 'image',
    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
    src: 'rooverlay-1.jpg'
  }, {
    type: 'iframe-video',
    title: 'Roo',
    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
    src: 'https://d1zucocqrua2yq.cloudfront.net/v2/video/player-frame/50b6675694a940db6d000001/media-00ism10unt4h9ek0ysbr25?autoplay=true'
  }, {
    type: 'image',
    src: 'rooverlay-3.jpg'
  }]
});

Login Overlay

var Rooverlay = require('rooverlay');
 
var rooverlay = new Rooverlay({
  loop: true,
  slides: [{
    type: 'iframe',
    src: 'https://staging-api.tickaroo.com/oauth/login?response_type=code&client_id=55d34d46e4b0b5f93ed111da&_lang=en'
  }]
});

API

new Rooverlay(options):

  • options:

    • closeOnOverlayClick: Closes slideshow on overlay background click. (default false)
    • slideIndex: Initial start index of the slideshow slides. (default 0)
    • loop: Loops slideshow. (default false)
    • skin: Slideshow layout skin, possible values are 'light' and 'dark' (default 'dark', undefined)
    • extraClasses: Adds extra classes to the class attribute of the root element .rooverlay-wrapper (default undefined)
    • pagination: Shows pagination. (default false)
    • paginationDescending: Counts the pages in descending order. (default false)
    • container: Element slideshow will be appended to. (default document.body)
    • disableKeyboardControls: Disable keyboard arrow key controls to go forward or back and the "escape" key to close the overlay. (default false)
    • onBeforeClose: Callback after closing the overlay. (default undefined)
    • onAfterSlideRender: Callback after slide renders. (default undefined)
    • onBeforeSlideRender: Callback before slide renders. (default undefined)
    • i18n: Text displayed to the user. (type PlainObject)
      • missing: Appears when content can't be loaded. (default 'Missing')
    • slides: Slides that will be displayed in the overlay. (type Array<PlainObject> default [])

    #### Image slide:

    • type: 'image'
    • src: Image url. (default undefined)
    • width: Maximal image width. (default dynamic image width)
    • height: Maximal image height. (default dynamic image height)
    • minWidth: Minimal image width, if window size allows it. (default 300)
    • minHeight: Minimal image height, if window size allows it. (default 300)
    • aspectRatio: Whether or not to respect image size ratio on resize. (default true)
    • description: Description text/HTML string appended to the content element. (default undefined)
    • descriptionElement: Description DOM element appended to the content element. (default undefined)
    • title: Title text/HTML string appended to the top row title element. (default undefined)

    #### Video iframe slide:

    • type: 'iframe-video'
    • src: Iframe url. (default undefined)
    • width: Maximal iframe width. (default 800)
    • height: Maximal iframe height. (default 450)
    • minWidth: Minimal iframe width, if window size allows it. (default undefined)
    • minHeight: Minimal iframe height, if window size allows it. (default undefined)
    • aspectRatio: Whether or not to respect iframe size ratio on resize. (default true)
    • description: Same as in image
    • descriptionElement: Same as in image
    • title: Same as in image

    #### Iframe slide:

    • type: 'iframe'
    • src: Iframe url. (default undefined)
    • width: Maximal iframe width. (default 800)
    • height: Maximal iframe height. (default 450)
    • minWidth: Minimal iframe width, if window size allows it. (default undefined)
    • minHeight: Minimal iframe height, if window size allows it. (default undefined)
    • aspectRatio: Whether or not to respect iframe size ratio on resize. (default false)

    #### HTML slide:

    • type: 'html'
    • html: HTML string that will be set inside the content element. (default undefined)
    • content: If 'html' isn't set: DOM element that will be inserted to the content element. (default undefined)
    • width: Maximal HTML width. (default 600)
    • height: Maximal HTML height. (default undefined)
    • minWidth: Minimal html width, if window size allows it. (default undefined)
    • minHeight: Minimal html height, if window size allows it. (default undefined)
    • aspectRatio: Whether or not to respect html size ratio on resize. (default false)

instance.updateOptions(options):

Update the initial options.

  • options: Same as in initialization.

instance.updateSlides(slides):

Update the initial slides .

  • slides: Same as in initialization options.slides.

instance.updateSlidesAndRerenderWithIndex(slides, index):

Update the initial slides and rerenders them with slide index if index is set.

  • slides: Same as in initialization options.slides.
  • index: Slide index (default undefined)

instance.nextSlide():

Go to the next slide.

instance.previousSlide():

Go to the previous slide.

instance.jumpToSlide(index):

Jump to the index.

  • index: Slide index (default 0)

instance.fit():

Will center content element inside viewport.

instance.showLoading():

Show loading spinner.

instance.hideLoading():

Hides loading spinner.

instance.destroy() or instance.close():

Close the overlay, remove it from the DOM and remove the event listeners, like resize.

CSS

Links

@import "~rooverlay/src/index.scss"
@import "~rooverlay/src/images.scss"

Classes

  • .rooverlay-overlay: Overlay background-color
  • .rooverlay-description: Description box color, background-color and padding

Install

npm i rooverlay

DownloadsWeekly Downloads

1

Version

1.2.3

License

MIT

Last publish

Collaborators

  • avatar