Versatile jQuery Modalbox / Lightbox Plugin - MultiDialog

MultiDialog is a powerful and touch-enabled plugin that takes advantage of jQuery and jQuery UI Dialog Widget for creating full featured Modalbox / Lightbox on your web page.

Features:

• Has the ability to handle different content types (like image, video, ajax content, iframe, inline content, etc)
• Has multipel viewport related settings and supports RWD.
• Has a powerful API.
• Fully compatible to jQuery UI's CSS Framework
• Supports of path related custom content type
• Supports of lightbox gallery

Basic Usage:

1. Include jQuery library and jQuery UI on your web page

<link rel="stylesheet" href="../css/jquery-ui-1.10.3.custom.css">
<script src="../js/jquery/jquery-1.9.1.js"></script>
<script src="../js/jquery/jquery-ui-1.10.3.custom.js"></script>

2. Include jQuery MultiDialog plugin files on the web page

<link rel="stylesheet" href="../css/jquery.multiDialog.css">
<script src="../js/jquery.ui.dialog.extended-1.0.2.js"></script>
<script src="../js/jquery.multiDialog.js"></script>

3. Include jQuery add-on for touch events (optional)

<script src="../js/mobile/jquery.event.move.js"></script>
<script src="../js/mobile/jquery.event.swipe.js"></script>

4. Include jQuery UI draggable and resizable widget(optional)

<script src="../js/mobile/jquery.event.move.js"></script>
<script src="../js/mobile/jquery.event.swipe.js"></script>

5. Create the html for a lightbox gallery

<ul>
<li><a class="lightbox" href="1.jpg"><img src="res/images/thumb.jpg"  title="" alt="" longdesc="" /></a></li>
<li><a class="lightbox" href="2.jpg"><img src="res/images/thumb.jpg"  title="" alt="" longdesc="" /></a></li>
<li><a class="lightbox" href="3.jpg"><img src="res/images/thumb.jpg"  title="" alt="" longdesc="" /></a></li>
<li><a class="lightbox" href="4.jpg"><img src="res/images/thumb.jpg"  title="" alt="" longdesc="" /></a></li>
<li><a class="lightbox" href="5.jpg"><img src="res/images/thumb.jpg"  title="" alt="" longdesc="" /></a></li>
...
</ul>

6. The javascript

$(function() {
$( "a.lightbox" ).MultiDialog({
gallery: {
enabled: true
},
dialog: {
buttons: {}
}
});
});

6. Default plugin options.

gallery: {
  enabled: false, // use all selected elements as a gallery
  loop: false,
  strings: {
    position: "Item {index} of {amount}: ",
    next: "Next",
    prev: "Previous"
  },
  showPositionInfo: {
    title: true,
    desc: false
  }
},

/**
* Enable description pan
* @property descEnabled
* @default true
* @type Boolean
*/
descEnabled: true,

/**
* jQuery UI Dialog options: see jQuery UI Dialog docs for all options, some options are not available!
* @property dialog
* @type Object
*/
dialog: {
  closeOnEscape: true,
  closeText: "close",
  
  /**
   * Close MultiDialog by click on overlay
   * @property dialog.closeModalOnClick
   * @default true
   * @type Boolean
   */
  closeModalOnClick : true,
  
  /**
   * Width of the content (not overall size, "auto" not allowed)
   * @property dialog.width
   * @default 600
   * @type Integer
   */
  width: 600,
  
  /**
   * Height of the content (not overall size, "auto" not allowed)
   * @property dialog.height
   * @default 400
   * @type Integer
   */
  height: 400,

  // viewport settings (API doc by jquery.ui.dialog.extended)
  forceFullscreen: false,
  resizeOnWindowResize: true,
  scrollWithViewport: true,
  resizeAccordingToViewport: true,
  resizeToBestPossibleSize: false,

  /**
   * Animate the resizing and positioning mechanism
   * @property dialog.useAnimation
   * @default true
   * @type Boolean
   */
  useAnimation: true,
  
  /**
   * Animate options as defined for jQuery UI show and hide options (see jQuery UI documentation)
   * @property dialog.animateOptions
   * @type Object
   */
  animateOptions: {
    duration: 500,
    queue: false
  },

  show: "fade", // string, use any jQuery UI effect here
  hide: "fade",
  modal: true,
  buttons: null, // options: null (default, adds pre/next buttons in gallery mode), {} (no buttons at all), or use as default dialog option
  
  /**
   * jQuery UI Dialog resize callback event (please note: native close, open and resize callbacks are not available)
   * @property dialog.resized
   * @type Function
   */
  resized: null,

  /**
   * Do not alter this property!
   * @property dialog.useContentSize
   * @type Boolean
   * @default true
   * @private
   */
  useContentSize: true
},

/**
 * Disable plugin
 * @property dialog.disabled
 * @default false
 * @type Boolean
 */
disabled: false,

/**
 * GET variable prefix (?ajax=true)
 * @property dialog.getVarPrefix
 * @default ""
 * @type Boolean
 */
getVarPrefix: "",

// set testing condition, description, alt and title atttribute for each content type
types: {
  defaultType: "auto", // image, ajax, inline, iframe, youtube, vimeo
  // default rendering for all content types, overwritten by each content type config
  defaultConfig: {
    test: null, // test for this content type, returns boolean
    template: "<div class='overflow'>{content}</div>",
    // title, desc & marker will only be rendered if an element is available (given by API or click event)
    title: function( element ) { // dialog title
      return element.attr( "title" ) || element.text();
    },
    desc: null, // description text
    marker: {}, // marker in templates, like image alt attribute
    addParameters: "" // addtional parameters (added to the given URL)
  },
  // configuration specific for each content type, merged with default config, use callbacks provided by this plugin instead
  config: {
    image: {
      test: function( href ) {
        return href.match( /\.(jpg|jpeg|png|gif)(\?.*)?$/ );
      },
      template: "<a href='#next' class='multibox-api next' rel='next'></a><a href='#prev' class='multibox-api prev' rel='prev'></a><img width='100%' height='100%' alt='{alt}' title='{title}' src='{path}' />",
      title: function( element ) {
        return element.find( "img" ).attr( "alt" ) || element.text();
      },
      desc: function( element ) {
        return element.find( "img" ).attr( "longdesc" ) || element.find( "img" ).attr( "alt" ) || element.attr( "title" );
      },
      marker: {
        title: function( element ) {
          return element.find( "img" ).attr( "alt" ) || element.attr( "title" ) || element.text();
        },
        alt: function( element ) {
          return element.find( "img" ).attr( "alt" ) || element.find( "img" ).attr( "title" ) || element.attr( "title" ) || element.text();
        }
        // add custom attributes, index is marker in template
      }
    },
    youtube: {
      test: function( href ) {
        return href.match( /youtube\.com\/watch/i ) || href.match( /youtu\.be/i );
      },
      template: "<iframe width='100%' height='100%' src='{url}' frameborder='0' allowFullScreen></iframe>",
      addParameters: "?autoplay=1"
    },
    vimeo: {
      test: function( href ) {
        return href.match( /vimeo\.com\//i );
      },
      template: "<iframe width='100%' height='100%' src='{url}' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>",
      addParameters: "?autoplay=1"
    },
    iframe: {
      test: function( href ) {
        return href.match( /iframe=true/i );
      },
      template: "<iframe width='100%' height='100%' src='{url}' frameborder='0'></iframe>"
    },
    ajax: {
      test: function( href ) {
        return href.match( /ajax=true/i );
      },
      // $.ajax settings
      settings: {
        // Please note: be careful with error, success and href
        dataType: "html"
      }
    },
    inline: {
      test: function( href ) {
        return href.match(/\#/);
      }
      // Please note: addParameters is not possible for inline type as the page is already loaded!
    }
    // add own config here!
  }
},

// custom opener
// this is a backfall, render your own HTML by type parameter! Set your own type parameter by using types.config option!
openCustom: function( data ){
  window.open( data.href, "_newtab" );
},

// loading handler
loadingHandler: function( data ){
  this.isLoading = true;
  this._defaultHandler( "<div class='ui-state-highlight ui-corner-all'><p><span class='ui-icon ui-icon-info'></span><strong>Loading content, please wait!</strong></p></div>", "Loading...", data );
},

// error handler
errorHandler: function( data ){
  this._defaultHandler( "<div class='ui-state-error ui-corner-all'><p><span class='ui-icon ui-icon-alert'></span><strong>Sorry, an error has occured. Please try again!</strong></p></div>", "Error!", data.data );
},

// callbacks
on: {
  create: null,
  createDialog: null,
  open: null,
  change: null,
  close: null,
  position: null,
  resize: null,
  move: null,
  // specific
  imageError: null,
  inlineError: null
  // use ajax.settings option for ajax specific callbacks
  // use loadingHandler and errorHandler as callbacks if needed
}
};

Change log:

v0.9.3 (2015-08-05)

• major update.

---

This awesome jQuery plugin is developed by fnagel. For more Advanced Usages, please check the demo page or visit the official website.