dojox/image/Lightbox.js

  • Provides:

    • dojox.image.Lightbox
  • Requires:

    • dojo.window in common in project dojo
    • dijit.Dialog in common in project dijit
    • dojox.fx._base in common
  • dojox.image.Lightbox

    • type
      Function
    • chains:
      • dijit._Widget: (prototype)
      • dijit._Widget: (call)
    • summary
      A dojo-based Lightbox implementation.
    • description
      An Elegant, keyboard accessible, markup and store capable Lightbox widget to show images
      in a modal dialog-esque format. Can show individual images as Modal dialog, or can group
      images with multiple entry points, all using a single "master" Dialog for visualization
      
      key controls:
      ESC - close
      Down Arrow / Rt Arrow / N - Next Image
      Up Arrow / Lf Arrow / P - Previous Image
    • example
      
      	<a href="image1.jpg" dojoType="dojox.image.Lightbox">show lightbox</a>
    • example
      
      	<a href="image2.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a>
      	<a href="image3.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a>
    • example
      
      	not implemented fully yet, though works with basic datastore access. need to manually call
      	widget._attachedDialog.addImage(item,"fromStore") for each item in a store result set.
      	<div dojoType="dojox.image.Lightbox" group="fromStore" store="storeName"></div>
  • dojox.image.Lightbox.group

    • type
      String
    • summary
      Grouping images in a page with similar tags will provide a 'slideshow' like grouping of images
  • dojox.image.Lightbox.title

    • type
      String
    • summary
      A string of text to be shown in the Lightbox beneath the image (empty if using a store)
  • dojox.image.Lightbox.href

    • summary
  • dojox.image.Lightbox.duration

    • type
      Integer
    • summary
      Generic time in MS to adjust the feel of widget. could possibly add various
      durations for the various actions (dialog fadein, sizeing, img fadein ...)
  • dojox.image.Lightbox.modal

    • type
      Boolean
    • summary
      If true, this Dialog instance will be truly modal and prevent closing until
      explicitly told to by calling hide() or clicking the (x) - Defaults to false
      to preserve previous behaviors. (aka: enable click-to-click on the underlay)
  • dojox.image.Lightbox._allowPassthru

    • type
      Boolean
    • summary
      Privately set this to disable/enable natural link of anchor tags
      
      
      _attachedDialg: dojox.image._LightboxDialog
      The pointer to the global lightbox dialog for this widget
  • dojox.image.Lightbox._attachedDialog

    • summary
  • dojox.image.Lightbox.startup

    • type
      Function
    • source: [view]
        this.inherited(arguments);
        // setup an attachment to the masterDialog (or create the masterDialog)
        var tmp = dijit.byId('dojoxLightboxDialog');
        if(tmp){
         this._attachedDialog = tmp;
        }else{
         // this is the first instance to start, so we make the masterDialog
         this._attachedDialog = new dojox.image.LightboxDialog({ id: "dojoxLightboxDialog" });
         this._attachedDialog.startup();
        }
        if(!this.store){
         // FIXME: full store support lacking, have to manually call this._attachedDialog.addImage(imgage,group) as it stands
         this._addSelf();
         this.connect(this.domNode, "onclick", "_handleClick");
        }
    • summary
  • dojox.image.Lightbox._addSelf

    • type
      Function
    • source: [view]
        this._attachedDialog.addImage({
         href: this.href,
         title: this.title
        }, this.group || null);
    • summary
      Add this instance to the master LightBoxDialog
  • dojox.image.Lightbox._handleClick

    • type
      Function
    • parameters:
      • e: (typeof Event)
    • source: [view]
        if(!this._allowPassthru){ e.preventDefault(); }
        else{ return; }
        this.show();
    • summary
      Handle the click on the link
  • dojox.image.Lightbox.show

    • type
      Function
    • source: [view]
        this._attachedDialog.show(this);
    • summary
      Show the Lightbox with this instance as the starting point
  • dojox.image.Lightbox.hide

    • type
      Function
    • source: [view]
        this._attachedDialog.hide();
    • summary
      Hide the Lightbox currently showing
  • dojox.image.Lightbox.disable

    • type
      Function
    • source: [view]
        this._allowPassthru = true;
    • summary
      Disables event clobbering and dialog, and follows natural link
  • dojox.image.Lightbox.enable

    • type
      Function
    • source: [view]
        this._allowPassthru = false;
    • summary
      Enables the dialog (prevents default link)
  • dojox.image.Lightbox.onClick

    • type
      Function
    • source: [view]
        // summary:
        //  Stub fired when the image in the lightbox is clicked.
    • summary
      Stub fired when the image in the lightbox is clicked.
  • dojox.image.Lightbox.destroy

    • type
      Function
    • source: [view]
        this._attachedDialog.removeImage(this);
        this.inherited(arguments);
    • summary
  • dojox.image.LightboxDialog

    • type
      Function
    • chains:
      • dijit.Dialog: (prototype)
      • dijit.Dialog: (call)
    • summary
      The &quot;dialog&quot; shared	 between any Lightbox instances on the page, publically available
      for programatic manipulation.
    • description
      A widget that intercepts anchor links (typically around images)
      and displays a modal Dialog. this is the actual Dialog, which you can
      create and populate manually, though should use simple Lightbox's
      unless you need the direct access.
      
      There should only be one of these on a page, so all dojox.image.Lightbox's will us it
      (the first instance of a Lightbox to be show()'n will create me If i do not exist)
    • example
      
      	// show a single image from a url
      	var url = "http://dojotoolkit.org/logo.png";
      	var dialog = new dojox.image.LightboxDialog().startup();
      	dialog.show({ href: url, title:"My Remote Image"});
    • parameters:
      • args: (typeof )
    • source: [view]
        this._groups = this._groups || (args && args._groups) || { XnoGroupX:[] };
  • dojox.image.LightboxDialog.title

    • type
      String
    • summary
      The current title, read from object passed to show()
  • dojox.image.LightboxDialog.inGroup

    • type
      Array
    • summary
      Array of objects. this is populated by from the JSON object _groups, and
      should not be populate manually. it is a placeholder for the currently
      showing group of images in this master dialog
  • dojox.image.LightboxDialog.imgUrl

    • type
      String
    • summary
      The src=&quot;&quot; attribute of our imageNode (can be null at statup)
  • dojox.image.LightboxDialog.errorMessage

    • type
      String
    • summary
      The text to display when an unreachable image is linked
  • dojox.image.LightboxDialog.adjust

    • type
      Boolean
    • summary
      If true, ensure the image always stays within the viewport
      more difficult than necessary to disable, but enabled by default
      seems sane in most use cases.
  • dojox.image.LightboxDialog.modal

    • type
      Boolean
    • summary
      If true, this Dialog instance will be truly modal and prevent closing until
      explicitly told to by calling hide() or clicking the (x) - Defaults to false
      to preserve previous behaviors. (aka: enable click-to-click on the underlay)
  • dojox.image.LightboxDialog._groups

    • type
      Object
    • summary
  • dojox.image.LightboxDialog.errorImg

    • type
      Url
    • summary
      Path to the image used when a 404 is encountered
  • dojox.image.LightboxDialog.templateString

    • summary
  • dojox.image.LightboxDialog.startup

    • type
      Function
    • source: [view]
        this.inherited(arguments);

        
        this._animConnects = [];
        this.connect(this.nextButtonNode, "onclick", "_nextImage");
        this.connect(this.prevButtonNode, "onclick", "_prevImage");
        this.connect(this.closeButtonNode, "onclick", "hide");
        this._makeAnims();
        this._vp = dojo.window.getBox();
        return this;
    • summary
      Add some extra event handlers, and startup our superclass.
    • return_summary
      dijit._Widget
      Perhaps the only `dijit._Widget` that returns itself to allow
      'chaining' or var referencing with .startup()
  • dojox.image.LightboxDialog.show

    • type
      Function
    • parameters:
      • groupData: (typeof Object)
        needs href and title attributes. the values for this image.
    • source: [view]
        var _t = this; // size
        this._lastGroup = groupData;

        
        // we only need to call dijit.Dialog.show() if we're not already open.
        if(!_t.open){
         _t.inherited(arguments);
         _t._modalconnects.push(
          dojo.connect(dojo.global, "onscroll", this, "_position"),
          dojo.connect(dojo.global, "onresize", this, "_position"),
          dojo.connect(dojo.body(), "onkeypress", this, "_handleKey")
         );
         if(!groupData.modal){
          _t._modalconnects.push(
           dojo.connect(dijit._underlay.domNode, "onclick", this, "onCancel")
          );
         }
        }

        
        if(this._wasStyled){
         // ugly fix for IE being stupid. place the new image relative to the old
         // image to allow for overriden templates to adjust the location of the
         // titlebar. DOM will remain "unchanged" between views.
         var tmpImg = dojo.create("img", null, _t.imgNode, "after");
         dojo.destroy(_t.imgNode);
         _t.imgNode = tmpImg;
         _t._makeAnims();
         _t._wasStyled = false;
        }

        
        dojo.style(_t.imgNode,"opacity","0");
        dojo.style(_t.titleNode,"opacity","0");

        
        var src = groupData.href;

        
        if((groupData.group && groupData !== "XnoGroupX") || _t.inGroup){
         if(!_t.inGroup){
          _t.inGroup = _t._groups[(groupData.group)];
          // determine where we were or are in the show
          dojo.forEach(_t.inGroup, function(g, i){
           if(g.href == groupData.href){
            _t._index = i;
            //return false;
           }
           //return true;
          });
         }
         if(!_t._index){
          _t._index = 0;
          var sr = _t.inGroup[_t._index];
          src = (sr && sr.href) || _t.errorImg;
         }
         // FIXME: implement titleTemplate
         _t.groupCount.innerHTML = " (" + (_t._index + 1) + " of " + Math.max(1, _t.inGroup.length) + ")";
         _t.prevButtonNode.style.visibility = "visible";
         _t.nextButtonNode.style.visibility = "visible";
        }else{
         // single images don't have buttons, or counters:
         _t.groupCount.innerHTML = "";
         _t.prevButtonNode.style.visibility = "hidden";
         _t.nextButtonNode.style.visibility = "hidden";
        }
        if(!groupData.leaveTitle){
         _t.textNode.innerHTML = groupData.title;
        }
        _t._ready(src);
    • summary
      Show the Master Dialog. Starts the chain of events to show
      an image in the dialog, including showing the dialog if it is
      not already visible
  • dojox.image.LightboxDialog._ready

    • type
      Function
    • parameters:
      • src: (typeof )
    • source: [view]
        var _t = this;

        
        // listen for 404's:
        _t._imgError = dojo.connect(_t.imgNode, "error", _t, function(){
         dojo.disconnect(_t._imgError);
         // trigger the above onload with a new src:
         _t.imgNode.src = _t.errorImg;
         _t.textNode.innerHTML = _t.errorMessage;
        });

        
        // connect to the onload of the image
        _t._imgConnect = dojo.connect(_t.imgNode, "load", _t, function(e){
         _t.resizeTo({
          w: _t.imgNode.width,
          h: _t.imgNode.height,
          duration:_t.duration
         });
         // cleanup
         dojo.disconnect(_t._imgConnect);
         if(_t._imgError){
          dojo.disconnect(_t._imgError);
         }
        });

        
        _t.imgNode.src = src;
    • summary
      A function to trigger all 'real' showing of some src
  • dojox.image.LightboxDialog._nextImage

    • type
      Function
    • source: [view]
        if(!this.inGroup){ return; }
        if(this._index + 1 < this.inGroup.length){
         this._index++;
        }else{
         this._index = 0;
        }
        this._loadImage();
    • summary
      Load next image in group
  • dojox.image.LightboxDialog._prevImage

    • type
      Function
    • source: [view]
        if(this.inGroup){
         if(this._index == 0){
          this._index = this.inGroup.length - 1;
         }else{
          this._index--;
         }
         this._loadImage();
        }
    • summary
      Load previous image in group
  • dojox.image.LightboxDialog._loadImage

    • type
      Function
    • source: [view]
        this._loadingAnim.play(1);
    • summary
      Do the prep work before we can show another image
  • dojox.image.LightboxDialog._prepNodes

    • type
      Function
    • source: [view]
        this._imageReady = false;
        if(this.inGroup && this.inGroup[this._index]){
         this.show({
          href: this.inGroup[this._index].href,
          title: this.inGroup[this._index].title
         });
        }else{
         this.show({
          title: this.errorMessage,
          href: this.errorImg
         });
        }
    • summary
      A localized hook to accompany _loadImage
  • dojox.image.LightboxDialog._calcTitleSize

    • type
      Function
    • source: [view]
        var sizes = dojo.map(dojo.query("> *", this.titleNode).position(), function(s){ return s.h; });
        return { h: Math.max.apply(Math, sizes) };
    • chains:
      • Math.max: (call)
    • summary
  • dojox.image.LightboxDialog.resizeTo

    • type
      Function
    • parameters:
      • size: (typeof Object)
      • forceTitle: (typeof )
    • source: [view]
        var adjustSize = dojo.boxModel == "border-box" ?
         dojo._getBorderExtents(this.domNode).w : 0,
         titleSize = forceTitle || this._calcTitleSize()
        ;

        
        this._lastTitleSize = titleSize;

        
        if(this.adjust &&
         (size.h + titleSize.h + adjustSize + 80 > this._vp.h ||
          size.w + adjustSize + 60 > this._vp.w
         )
        ){
         this._lastSize = size;
         size = this._scaleToFit(size);
        }
        this._currentSize = size;

        
        var _sizeAnim = dojox.fx.sizeTo({
         node: this.containerNode,
         duration: size.duration||this.duration,
         width: size.w + adjustSize,
         height: size.h + titleSize.h + adjustSize
        });
        this.connect(_sizeAnim, "onEnd", "_showImage");
        _sizeAnim.play(15);
    • summary
      Resize our dialog container, and fire _showImage
  • dojox.image.LightboxDialog._scaleToFit

    • type
      Function
    • parameters:
      • size: (typeof Object)
        The 'size' object passed around for this image
    • source: [view]
        var ns = {}, // New size
         nvp = {
          w: this._vp.w - 80,
          h: this._vp.h - 60 - this._lastTitleSize.h
         }; // New viewport


        // Calculate aspect ratio
        var viewportAspect = nvp.w / nvp.h,
         imageAspect = size.w / size.h;


        // Calculate new image size
        if(imageAspect >= viewportAspect){
         ns.h = nvp.w / imageAspect;
         ns.w = nvp.w;
        }else{
         ns.w = imageAspect * nvp.h;
         ns.h = nvp.h;
        }


        // we actually have to style this image, it's too big
        this._wasStyled = true;
        this._setImageSize(ns);


        ns.duration = size.duration;
        return ns; // Object
    • summary
      resize an image to fit within the bounds of the viewport
    • returns
      Object
  • dojox.image.LightboxDialog._setImageSize

    • type
      Function
    • parameters:
      • size: (typeof )
    • source: [view]
        var s = this.imgNode;
        s.height = size.h;
        s.width = size.w;
    • summary
      Reset the image size to some actual size.
  • dojox.image.LightboxDialog._size

    • type
      Function
    • source: [view]
      }
    • summary
  • dojox.image.LightboxDialog._position

    • type
      Function
    • parameters:
      • e: (typeof Event)
    • source: [view]
        this._vp = dojo.window.getBox();
        this.inherited(arguments);

        
        // determine if we need to scale up or down, if at all.
        if(e && e.type == "resize"){
         if(this._wasStyled){
          this._setImageSize(this._lastSize);
          this.resizeTo(this._lastSize);
         }else{
          if(this.imgNode.height + 80 > this._vp.h || this.imgNode.width + 60 > this._vp.h){
           this.resizeTo({
            w: this.imgNode.width, h: this.imgNode.height
           });
          }
         }
        }
    • summary
      we want to know the viewport size any time it changes
  • dojox.image.LightboxDialog._showImage

    • type
      Function
    • source: [view]
        this._showImageAnim.play(1);
    • summary
      Fade in the image, and fire showNav
  • dojox.image.LightboxDialog._showNav

    • type
      Function
    • source: [view]
        var titleSizeNow = dojo.marginBox(this.titleNode);
        if(titleSizeNow.h > this._lastTitleSize.h){
         this.resizeTo(this._wasStyled ? this._lastSize : this._currentSize, titleSizeNow);
        }else{
         this._showNavAnim.play(1);
        }
    • summary
      Fade in the footer, and setup our connections.
  • dojox.image.LightboxDialog.hide

    • type
      Function
    • source: [view]
        dojo.fadeOut({
         node: this.titleNode,
         duration: 200,
         // #5112 - if you _don't_ change the .src, safari will
         // _never_ fire onload for this image
         onEnd: dojo.hitch(this, function(){
          this.imgNode.src = this._blankGif;
         })
        }).play(5);


        this.inherited(arguments);


        this.inGroup = null;
        this._index = null;
    • summary
      Hide the Master Lightbox
  • dojox.image.LightboxDialog.addImage

    • type
      Function
    • parameters:
      • child: (typeof Object)
        The image information to add.
        href: String - link to image (required)
        title: String - title to display
      • group: (typeof String)
        attach to group of similar tag or null for individual image instance
    • source: [view]
        var g = group;
        if(!child.href){ return; }
        if(g){
         if(!this._groups[g]){
          this._groups[g] = [];
         }
         this._groups[g].push(child);
        }else{ this._groups["XnoGroupX"].push(child); }
    • summary
      Add an image to this Master Lightbox
  • dojox.image.LightboxDialog.removeImage

    • type
      Function
    • parameters:
      • child: (typeof Widget)
        Object
        A reference to the Lightbox child that was added (or an object literal)
        only the .href member is compared for uniqueness. The object may contain
        a .group member as well.
    • source: [view]
        var g = child.group || "XnoGroupX";
        dojo.every(this._groups[g], function(item, i, ar){
         if(item.href == child.href){
          ar.splice(i, 1);
          return false;
         }
         return true;
        });
    • summary
      Remove an image instance from this LightboxDialog.
  • dojox.image.LightboxDialog.removeGroup

    • type
      Function
    • parameters:
      • group: (typeof )
    • source: [view]
        if(this._groups[group]){ this._groups[group] = []; }
    • summary
      Remove all images in a passed group
  • dojox.image.LightboxDialog._handleKey

    • type
      Function
    • parameters:
      • e: (typeof Event)
    • source: [view]
        if(!this.open){ return; }


        var dk = dojo.keys;
        switch(e.charOrCode){

         
         case dk.ESCAPE:
          this.hide();
          break;


         case dk.DOWN_ARROW:
         case dk.RIGHT_ARROW:
         case 78: // key "n"
          this._nextImage();
          break;


         case dk.UP_ARROW:
         case dk.LEFT_ARROW:
         case 80: // key "p"
          this._prevImage();
          break;
        }
    • summary
      Handle keyboard navigation internally
  • dojox.image.LightboxDialog._makeAnims

    • type
      Function
    • source: [view]
        dojo.forEach(this._animConnects, dojo.disconnect);
        this._animConnects = [];
        this._showImageAnim = dojo.fadeIn({
          node: this.imgNode,
          duration: this.duration
         });
        this._animConnects.push(dojo.connect(this._showImageAnim, "onEnd", this, "_showNav"));
        this._loadingAnim = dojo.fx.combine([
          dojo.fadeOut({ node:this.imgNode, duration:175 }),
          dojo.fadeOut({ node:this.titleNode, duration:175 })
         ]);
        this._animConnects.push(dojo.connect(this._loadingAnim, "onEnd", this, "_prepNodes"));
        this._showNavAnim = dojo.fadeIn({ node: this.titleNode, duration:225 });
    • summary
      make and cleanup animation and animation connections
  • dojox.image.LightboxDialog.onClick

    • type
      Function
    • parameters:
      • groupData: (typeof )
    • source: [view]
        // summary: a stub function, called with the currently displayed image as the only argument
    • summary
      a stub function, called with the currently displayed image as the only argument
  • dojox.image.LightboxDialog._onImageClick

    • type
      Function
    • parameters:
      • e: (typeof )
    • source: [view]
        if(e && e.target == this.imgNode){
         this.onClick(this._lastGroup);
         // also fire the onclick for the Lightbox widget which triggered, if you
         // aren't working directly with the LBDialog
         if(this._lastGroup.declaredClass){
          this._lastGroup.onClick(this._lastGroup);
         }
        }
    • summary
  • dojox.image.LightboxDialog._groups.XnoGroupX

    • summary
  • dojox.image.LightboxDialog._animConnects

    • summary
  • dojox.image.LightboxDialog._vp

    • summary
  • dojox.image.LightboxDialog._lastGroup

    • summary
  • dojox.image.LightboxDialog._index

    • summary
  • dojox.image.LightboxDialog._imageReady

    • summary
  • dojox.image.LightboxDialog._lastTitleSize

    • summary
  • dojox.image.LightboxDialog._lastSize

    • summary
  • dojox.image.LightboxDialog._currentSize

    • summary
  • dojox.image.LightboxDialog._wasStyled

    • summary
  • dojox.image.LightboxDialog.imgNode.src

    • summary
  • dojox.image.LightboxDialog._showImageAnim

    • summary
  • dojox.image.LightboxDialog._loadingAnim

    • summary
  • dojox.image.LightboxDialog._showNavAnim

    • summary
  • dojox.image

    • type
      Object
    • summary
  • dojox

    • type
      Object
    • summary