dojox/image/Lightbox.js

• Provides:

  • dojox.image.Lightbox

• Requires:

  • dojo.window in common
  • dijit.Dialog in common
  • 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

  • type

    String

• 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

• dojox.image.Lightbox._attachedDialog

  • type

    Object

• dojox.image.Lightbox.startup

  • type

    Function

• dojox.image.Lightbox._addSelf

  • summary

    Add this instance to the master LightBoxDialog

  • type

    Function

• dojox.image.Lightbox._handleClick

  • parameters:
    • e: (typeof Event)
  • summary

    Handle the click on the link

  • type

    Function

• dojox.image.Lightbox.show

  • summary

    Show the Lightbox with this instance as the starting point

  • type

    Function

• dojox.image.Lightbox.hide

  • summary

    Hide the Lightbox currently showing

  • type

    Function

• dojox.image.Lightbox.disable

  • summary

    Disables event clobbering and dialog, and follows natural link

  • type

    Function

• dojox.image.Lightbox.enable

  • summary

    Enables the dialog (prevents default link)

  • type

    Function

• dojox.image.Lightbox.onClick

  • summary

    Stub fired when the image in the lightbox is clicked.

  • type

    Function

• dojox.image.Lightbox.destroy

  • type

    Function

• dojox.image.LightboxDialog

  • type

    Function

  • chains:
    • dijit.Dialog: (prototype)
    • dijit.Dialog: (call)
  • parameters:
    • args
  • summary

    The "dialog" 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"});

• 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

  • alias - dijit._Widget.prototype._blankGif
  • type

    String

  • summary

    The src="" 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

    an object of arrays, each array (of objects) being a unique 'group'

• dojox.image.LightboxDialog._groups.XnoGroupX

  • type

    Array

• dojox.image.LightboxDialog.errorImg

  • type

    Url

  • summary

    Path to the image used when a 404 is encountered

• dojox.image.LightboxDialog.templateString

  • type

    Object

• dojox.image.LightboxDialog.constructor

  • constructor - constructor
  • type

    Function

  • parameters:
    • args

• dojox.image.LightboxDialog.startup

  • 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()

  • type

    Function

• dojox.image.LightboxDialog._animConnects

  • type

    Array

• dojox.image.LightboxDialog._vp

  • type

    Object

• dojox.image.LightboxDialog.show

  • parameters:
    • groupData: (typeof Object)

      needs href and title attributes. the values for this image.

  • 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

  • type

    Function

• dojox.image.LightboxDialog._lastGroup

• dojox.image.LightboxDialog._ready

  • parameters:
    • src
  • summary

    A function to trigger all 'real' showing of some src

  • type

    Function

• dojox.image.LightboxDialog._nextImage

  • summary

    Load next image in group

  • type

    Function

• dojox.image.LightboxDialog._index

  • type

    Object

• dojox.image.LightboxDialog._prevImage

  • summary

    Load previous image in group

  • type

    Function

• dojox.image.LightboxDialog._loadImage

  • summary

    Do the prep work before we can show another image

  • type

    Function

• dojox.image.LightboxDialog._prepNodes

  • summary

    A localized hook to accompany _loadImage

  • type

    Function

• dojox.image.LightboxDialog._imageReady

  • type

    bool

• dojox.image.LightboxDialog._calcTitleSize

  • type

    Function

• dojox.image.LightboxDialog.resizeTo

  • parameters:
    • size: (typeof Object)
    • forceTitle
  • summary

    Resize our dialog container, and fire _showImage

  • type

    Function

• dojox.image.LightboxDialog._lastTitleSize

• dojox.image.LightboxDialog._lastSize

• dojox.image.LightboxDialog._currentSize

• dojox.image.LightboxDialog._scaleToFit

  • parameters:
    • size: (typeof Object)

      The 'size' object passed around for this image

  • returns

    Object

  • summary

    resize an image to fit within the bounds of the viewport

  • type

    Function

• dojox.image.LightboxDialog._wasStyled

  • type

    Object

• dojox.image.LightboxDialog._setImageSize

  • parameters:
    • size
  • summary

    Reset the image size to some actual size.

  • type

    Function

• dojox.image.LightboxDialog.imgNode

• dojox.image.LightboxDialog.imgNode.height

• dojox.image.LightboxDialog.imgNode.width

• dojox.image.LightboxDialog._size

  • type

    Function

• dojox.image.LightboxDialog._position

  • parameters:
    • e: (typeof Event)
  • summary

    we want to know the viewport size any time it changes

  • type

    Function

• dojox.image.LightboxDialog._showImage

  • summary

    Fade in the image, and fire showNav

  • type

    Function

• dojox.image.LightboxDialog._showNav

  • summary

    Fade in the footer, and setup our connections.

  • type

    Function

• dojox.image.LightboxDialog.hide

  • summary

    Hide the Master Lightbox

  • type

    Function

• dojox.image.LightboxDialog.addImage

  • 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

  • summary

    Add an image to this Master Lightbox

  • type

    Function

• dojox.image.LightboxDialog.removeImage

  • 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.

  • summary

    Remove an image instance from this LightboxDialog.

  • type

    Function

• dojox.image.LightboxDialog.removeGroup

  • parameters:
    • group
  • summary

    Remove all images in a passed group

  • type

    Function

• dojox.image.LightboxDialog._handleKey

  • parameters:
    • e: (typeof Event)
  • summary

    Handle keyboard navigation internally

  • type

    Function

• dojox.image.LightboxDialog._makeAnims

  • summary

    make and cleanup animation and animation connections

  • type

    Function

• dojox.image.LightboxDialog._showImageAnim

  • type

    Object

• dojox.image.LightboxDialog._loadingAnim

  • type

    Object

• dojox.image.LightboxDialog._showNavAnim

  • type

    Object

• dojox.image.LightboxDialog.onClick

  • parameters:
    • groupData
  • summary

    a stub function, called with the currently displayed image as the only argument

  • type

    Function

• dojox.image.LightboxDialog._onImageClick

  • parameters:
    • e
  • type

    Function

• dojox.image

  • type

    Object

• dojox

  • type

    Object