rooverlay
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. (defaultfalse
) -
slideIndex
: Initial start index of the slideshow slides. (default0
) -
loop
: Loops slideshow. (defaultfalse
) -
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
(defaultundefined
) -
pagination
: Shows pagination. (defaultfalse
) -
paginationDescending
: Counts the pages in descending order. (defaultfalse
) -
container
: Element slideshow will be appended to. (defaultdocument.body
) -
disableKeyboardControls
: Disable keyboard arrow key controls to go forward or back and the "escape" key to close the overlay. (defaultfalse
) -
onBeforeClose
: Callback after closing the overlay. (defaultundefined
) -
onAfterSlideRender
: Callback after slide renders. (defaultundefined
) -
onBeforeSlideRender
: Callback before slide renders. (defaultundefined
) -
i18n
: Text displayed to the user. (typePlainObject
)-
missing
: Appears when content can't be loaded. (default'Missing'
)
-
-
slides
: Slides that will be displayed in the overlay. (typeArray<PlainObject>
default[]
)
-
type
:'image'
-
src
: Image url. (defaultundefined
) -
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. (default300
) -
minHeight
: Minimal image height, if window size allows it. (default300
) -
aspectRatio
: Whether or not to respect image size ratio on resize. (defaulttrue
) -
description
: Description text/HTML string appended to the content element. (defaultundefined
) -
descriptionElement
: Description DOM element appended to the content element. (defaultundefined
) -
title
: Title text/HTML string appended to the top row title element. (defaultundefined
)
-
type
:'iframe-video'
-
src
: Iframe url. (defaultundefined
) -
width
: Maximal iframe width. (default800
) -
height
: Maximal iframe height. (default450
) -
minWidth
: Minimal iframe width, if window size allows it. (defaultundefined
) -
minHeight
: Minimal iframe height, if window size allows it. (defaultundefined
) -
aspectRatio
: Whether or not to respect iframe size ratio on resize. (defaulttrue
) -
description
: Same as inimage
-
descriptionElement
: Same as inimage
-
title
: Same as inimage
-
type
:'iframe'
-
src
: Iframe url. (defaultundefined
) -
width
: Maximal iframe width. (default800
) -
height
: Maximal iframe height. (default450
) -
minWidth
: Minimal iframe width, if window size allows it. (defaultundefined
) -
minHeight
: Minimal iframe height, if window size allows it. (defaultundefined
) -
aspectRatio
: Whether or not to respect iframe size ratio on resize. (defaultfalse
)
-
type
:'html'
-
html
: HTML string that will be set inside the content element. (defaultundefined
) -
content
: If'html'
isn't set: DOM element that will be inserted to the content element. (defaultundefined
) -
width
: Maximal HTML width. (default600
) -
height
: Maximal HTML height. (defaultundefined
) -
minWidth
: Minimal html width, if window size allows it. (defaultundefined
) -
minHeight
: Minimal html height, if window size allows it. (defaultundefined
) -
aspectRatio
: Whether or not to respect html size ratio on resize. (defaultfalse
)
-
instance.updateOptions(options)
:
Update the initial options.
-
options
: Same as in initialization.
instance.updateSlides(slides)
:
Update the initial slides .
-
slides
: Same as in initializationoptions.slides
.
instance.updateSlidesAndRerenderWithIndex(slides, index)
:
Update the initial slides and rerenders them with slide index if index
is set.
-
slides
: Same as in initializationoptions.slides
. -
index
: Slide index (defaultundefined
)
instance.nextSlide()
:
Go to the next slide.
instance.previousSlide()
:
Go to the previous slide.
instance.jumpToSlide(index)
:
Jump to the index.
-
index
: Slide index (default0
)
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