dojox/image/LightboxNano.js

• Provides:

  • dojox.image.LightboxNano

• dojox.image.LightboxNano

  • type

    Function

  • summary

    Initializes the DOM node and connect onload event

  • description

    Very lightweight lightbox which only displays a larger image.  There is
    no support for a caption or description.  The lightbox can be closed by
    clicking any where or pressing any key.  This widget is intended to be
    used on <a> and <img> tags.  Upon creation, if the domNode is <img> tag,
    then it is wrapped in an <a> tag, then a <div class="enlarge"> is placed
    inside the <a> and can be styled to display an icon that the original
    can be enlarged.

  • example

    
    	<a dojoType="dojox.image.LightboxNano" href="/path/to/largeimage.jpg"><img src="/path/to/thumbnail.jpg"></a>

  • example

    
    	<img dojoType="dojox.image.LightboxNano" src="/path/to/thumbnail.jpg" href="/path/to/largeimage.jpg">

  • parameters:
    • p: (typeof Object)
    • n: (typeof DomNode)
  • source: [view]
       var _this = this;
    
    
       dojo.mixin(_this, p);
       n = _this._node = dojo.byId(n);
    
    
       // if we have a origin node, then prepare it to show the LightboxNano
       if(n){
        if(!/a/i.test(n.tagName)){
         var a = dojo.create("a", { href: _this.href, "class": n.className }, n, "after");
         n.className = "";
         a.appendChild(n);
         n = a;
        }
    
    
        dojo.style(n, "position", "relative");
        _this._createDiv("dojoxEnlarge", n);
        dojo.setSelectable(n, false);
        _this._onClickEvt = dojo.connect(n, "onclick", _this, "_load");
       }
    
    
       if(_this.href){
        setTimeout(function(){
         (new Image()).src = _this.href;
         _this._hideLoading();
        }, _this.preloadDelay);
       }

• dojox.image.LightboxNano.href

  • type

    string

  • summary

    URL to the large image to show in the lightbox.

• dojox.image.LightboxNano.duration

  • type

    int

  • summary

    The delay in milliseconds of the LightboxNano open and close animation.

• dojox.image.LightboxNano.preloadDelay

  • type

    int

  • summary

    The delay in milliseconds after the LightboxNano is created before preloading the larger image.

• dojox.image.LightboxNano.destroy

  • type

    Function

  • source: [view]
       var a = this._connects || [];
       a.push(this._onClickEvt);
       dojo.forEach(a, dojo.disconnect);
       dojo.destroy(this._node);
  • summary

    Destroys the LightboxNano and it's DOM node

• dojox.image.LightboxNano._createDiv

  • type

    Function

  • parameters:
    • cssClass: (typeof String)
    • refNode: (typeof DomNode)
    • display: (typeof boolean)
  • source: [view]
       return dojo.create("div", { // DomNode
        "class": cssClass,
        style: {
         position: abs,
         display: display ? "" : "none"
        }
       }, refNode);
  • summary

    Creates a div for the enlarge icon and loading indicator layers

  • returns

    DomNode

• dojox.image.LightboxNano._load

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
       var _this = this;
    
    
       e && dojo.stopEvent(e);
    
    
       if(!_this._loading){
        _this._loading = true;
        _this._reset();
    
    
        var i = _this._img = dojo.create("img", {
          style: {
           visibility: "hidden",
           cursor: "pointer",
           position: abs,
           top: 0,
           left: 0,
           zIndex: 9999999
          }
         }, dojo.body()),
         ln = _this._loadingNode,
         n = dojo.query("img", _this._node)[0] || _this._node,
         a = dojo.position(n, true),
         c = dojo.contentBox(n),
         b = dojo._getBorderExtents(n)
        ;
    
    
        if(ln == null){
         _this._loadingNode = ln = _this._createDiv("dojoxLoading", _this._node, true);
         var l = dojo.marginBox(ln);
         dojo.style(ln, {
          left: parseInt((c.w - l.w) / 2) + "px",
          top: parseInt((c.h - l.h) / 2) + "px"
         });
        }
    
    
        c.x = a.x - 10 + b.l;
        c.y = a.y - 10 + b.t;
        _this._start = c;
    
    
        _this._connects = [dojo.connect(i, "onload", _this, "_show")];
    
    
        i.src = _this.href;
       }
  • summary

    Creates the large image and begins to show it

• dojox.image.LightboxNano._hideLoading

  • type

    Function

  • source: [view]
       if(this._loadingNode){
        dojo.style(this._loadingNode, "display", "none");
       }
       this._loadingNode = false;
  • summary

    Hides the animated loading indicator

• dojox.image.LightboxNano._show

  • type

    Function

  • source: [view]
       var _this = this,
        vp = getViewport(),
        w = _this._img.width,
        h = _this._img.height,
        vpw = parseInt((vp.w - 20) * 0.9),
        vph = parseInt((vp.h - 20) * 0.9),
        dd = dojo.doc,
        bg = _this._bg = dojo.create("div", {
         style: {
          backgroundColor: "#000",
          opacity: 0.0,
          position: abs,
          zIndex: 9999998
         }
        }, dojo.body()),
        ln = _this._loadingNode
       ;
    
    
       if(_this._loadingNode){
        _this._hideLoading();
       }
       dojo.style(_this._img, {
        border: "10px solid #fff",
        visibility: "visible"
       });
       dojo.style(_this._node, vis, "hidden");
    
    
       _this._loading = false;
    
    
       _this._connects = _this._connects.concat([
        dojo.connect(dd, "onmousedown", _this, "_hide"),
        dojo.connect(dd, "onkeypress", _this, "_key"),
        dojo.connect(window, "onresize", _this, "_sizeBg")
       ]);
    
    
       if(w > vpw){
        h = h * vpw / w;
        w = vpw;
       }
       if(h > vph){
        w = w * vph / h;
        h = vph;
       }
    
    
       _this._end = {
        x: (vp.w - 20 - w) / 2 + vp.l,
        y: (vp.h - 20 - h) / 2 + vp.t,
        w: w,
        h: h
       };
    
    
       _this._sizeBg();
    
    
       dojo.fx.combine([
        _this._anim(_this._img, _this._coords(_this._start, _this._end)),
        _this._anim(bg, { opacity: 0.5 })
       ]).play();
  • summary

    The image is now loaded, calculate size and display

• dojox.image.LightboxNano._sizeBg

  • type

    Function

  • source: [view]
       var dd = dojo.doc.documentElement;
       dojo.style(this._bg, {
        top: 0,
        left: 0,
        width: dd.scrollWidth + "px",
        height: dd.scrollHeight + "px"
       });
  • summary

    Resize the background to fill the page

• dojox.image.LightboxNano._key

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
       dojo.stopEvent(e);
       this._hide();
  • summary

    A key was pressed, so hide the lightbox

• dojox.image.LightboxNano._coords

  • type

    Function

  • parameters:
    • s: (typeof Object)
    • e: (typeof Object)
  • source: [view]
       return { // Object
        left: { start: s.x, end: e.x },
        top: { start: s.y, end: e.y },
        width: { start: s.w, end: e.w },
        height: { start: s.h, end: e.h }
       };
  • summary

    Returns animation parameters with the start and end coords

  • returns

    Object

• dojox.image.LightboxNano._hide

  • type

    Function

  • source: [view]
       var _this = this;
       dojo.forEach(_this._connects, dojo.disconnect);
       _this._connects = [];
       dojo.fx.combine([
        _this._anim(_this._img, _this._coords(_this._end, _this._start), "_reset"),
        _this._anim(_this._bg, {opacity:0})
       ]).play();
  • summary

    Closes the lightbox

• dojox.image.LightboxNano._reset

  • type

    Function

  • source: [view]
       dojo.style(this._node, vis, "visible");
       dojo.destroy(this._img);
       dojo.destroy(this._bg);
       this._img = this._bg = null;
       this._node.focus();
  • summary

    Destroys the lightbox

• dojox.image.LightboxNano._anim

  • type

    Function

  • parameters:
    • node: (typeof DomNode)
    • args: (typeof Object)
    • onEnd: (typeof Function)
  • source: [view]
       return dojo.animateProperty({ // dojo.Animation
        node: node,
        duration: this.duration,
        properties: args,
        onEnd: onEnd ? dojo.hitch(this, onEnd) : null
       });
  • summary

    Creates the lightbox open/close and background fadein/out animations

  • returns

    dojo.Animation

• dojox.image.LightboxNano.show

  • type

    Function

  • parameters:
    • args: (typeof Object)

      An object with optional members of `href` and `origin`.
      `origin` can be be a String|Id of a DomNode to use when
      animating the openeing of the image (the 'box' effect starts
      from this origin point. eg: { origin: e.target })
      If there's no origin, it will use the center of the viewport.
      The `href` member is a string URL for the image to be
      displayed. Omiting either of these members will revert to
      the default href (which could be absent in some cases) and
      the original srcNodeRef for the widget.

  • source: [view]
       args = args || {};
       this.href = args.href || this.href;
    
    
       var n = dojo.byId(args.origin),
        vp = getViewport();
    
    
       // if we don't have a valid origin node, then create one as a reference
       // that is centered in the viewport
       this._node = n || dojo.create("div", {
         style: {
          position: abs,
          width: 0,
          hieght: 0,
          left: (vp.l + (vp.w / 2)) + "px",
          top: (vp.t + (vp.h / 2)) + "px"
         }
        }, dojo.body())
       ;
    
    
       this._load();
    
    
       // if we don't have a valid origin node, then destroy the centered reference
       // node since load() has already been called and it's not needed anymore.
       if(!n){
        dojo.destroy(this._node);
       }
  • summary

    Shows this LightboxNano programatically. Allows passing a new href and
    a programatic origin.

• dojox.image.LightboxNano._loadingNode

  • summary

• dojox.image.LightboxNano._img

  • summary

• dojox.image.LightboxNano._node

  • summary

• getViewport

  • type

    Function

  • source: [view]
       var scrollRoot = (dojo.doc.compatMode == "BackCompat") ? dojo.body() : dojo.doc.documentElement,
        scroll = dojo._docScroll();
        return { w: scrollRoot.clientWidth, h: scrollRoot.clientHeight, l: scroll.x, t: scroll.y };
  • summary

    Returns the dimensions and scroll position of the viewable area of a browser window

• _this

  • mixins:
    • p: (normal)
  • summary

• abs

  • summary

• vis

  • summary

• dojox.image

  • type

    Object

  • summary

• dojox

  • type

    Object

  • summary