KO LightBox Binding

Data-binding options:

autoPlay
clickPause
closeOnEscape
closeOnOuterClick
delay
disabled
keyNav

loop
modal
showControlsOnHover
showCounter
showNavButtons
showTimer
textPosition

Example:

In this example, the ViewModel is defined specifically for use with the light box. It has disabled, firstDayOfWeek, viewType, nextTooltip, and prevTooltip properties that are bound in the View. If any of these values change, the widget automatically responds to them. The widget also updates the ViewModel values as it modifies them.

Create a ViewModel:

ViewModel Script	Copy Code
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.textPosition = ko.observable("overlay"); self.showCounter = ko.observable(true); self.showNavButtons = ko.observable(true); self.showTimer = ko.observable(false); self.showControlsOnHover = ko.observable(true); self.clickPause = ko.observable(false); self.keyNav = ko.observable(false); self.modal = ko.observable(false); self.closeOnEscape = ko.observable(true); self.closeOnOuterClick = ko.observable(true); self.autoPlay = ko.observable(false); self.delay = ko.numericObservable(2000); self.loop = ko.observable(true); };

ViewModel Script

Copy Code

var viewModel = function () {  
    var self = this;  
       self.disabled = ko.observable(false); 
       self.textPosition = ko.observable("overlay");
       self.showCounter = ko.observable(true);
       self.showNavButtons = ko.observable(true);
       self.showTimer = ko.observable(false);
       self.showControlsOnHover = ko.observable(true);
       self.clickPause = ko.observable(false);
       self.keyNav = ko.observable(false);
       self.modal = ko.observable(false);
       self.closeOnEscape = ko.observable(true);
       self.closeOnOuterClick = ko.observable(true);
       self.autoPlay = ko.observable(false);
       self.delay = ko.numericObservable(2000);
       self.loop = ko.observable(true);
};

Create View with Bound Controls:

View Markup	Copy Code
<div id="lightbox" data-bind="wijlightbox: { disabled: disabled, textPosition: textPosition, showCounter: showCounter, showNavButtons: showNavButtons, showTimer: showTimer, showControlsOnHover: showControlsOnHover, clickPause: clickPause, keyNav: keyNav, modal: modal, closeOnEscape: closeOnEscape, closeOnOuterClick: closeOnOuterClick, autoPlay: autoPlay, delay: delay, loop: loop}"> </div>

View Markup

Copy Code

<div id="lightbox" data-bind="wijlightbox: {
    disabled: disabled, 
    textPosition: textPosition, 
    showCounter: showCounter, 
    showNavButtons: showNavButtons, 
    showTimer: showTimer, 
    showControlsOnHover: showControlsOnHover, 
    clickPause: clickPause, 
    keyNav: keyNav, 
    modal: modal, 
    closeOnEscape: closeOnEscape,
    closeOnOuterClick: closeOnOuterClick, 
    autoPlay: autoPlay, 
    delay: delay, 
    loop: loop}">
</div>

Concepts

Widgets

Reference