Examples

A simple lightbox gallery without gallery buttons. Different sizes and very big images will be handled without problems.

  • Example picture #1
  • Example picture #2
  • Example picture #3
  • Example picture #4
  • Example picture #5
  • Example picture #6
  • Example picture #7
  • Example picture #8
  • Example picture #9
  • Example picture #10

MultiDialog can handle different content types.

MultiDialog has multipel viewport related settings and supports RWD.
Try the demos and resize the window or scroll.

  • forceFullscreen: false Always force the dialog to be maximized. Not ratio aware.

  • resizeOnWindowResize: false Resize the dialog when the window is resized. Useful for repsonsive websites.

  • scrollWithViewport: false Reposition the dialog when the window is scrolled. Useful for repsonsive websites.

  • resizeAccordingToViewport: true Resizes the dialog (ratio aware) to fit the viewport. Makes sure the dialog isn't bigger as the viewport. Very useful for image galleries as its guarantees the best possible image size.

  • resizeToBestPossibleSize: false Resizes the dialog (ratio aware) to fit the viewport. Something like a ratio aware fullscreen mode. This could increase the dialog size.

MultiDialog has a powerful API.


More examples coming soon...
Sorry, not fully documented yet. Please see soucecode for available functions:

  • MultiDialog functions
    • open
    • close
    • openLink
    • openImage, openAjax, openIframe, openYoutube, openVimeo, openHtml, openInline
    • resize
    • position
  • MultiDialog gallery functions
    • openGallery
    • next
    • prev
    • first
    • last
  • Default jQuery UI functions
    • destroy
    • widget
    • dialog
open

This function...

openGallery

This function...

openLink

This function...

openXyz

This function...

next, prev, first, last

This function...

resize

This function...

position

This function...

This example explains how to use the jQuery UI Dialog options.

Open a bigger, resizable, draggable, relative to this tab widget positioned Dialog without an overlay.


Please note you need to add jquery.ui.draggable.js and jquery.ui.resizable.js.

MultiDialog is fully compatible to jQuery UI's CSS Framework - so theming is pretty easy!

Some example themes, delivered by Super Theme Themeswitcher.



Choose a theme and try any demo on this page.

Try this plain style gallery.
Just add a new jQuery UI CSS Theme. Built your own with jQuery UI's Themeroller.

Some more examples: GETvar support, fullscreen mode, ...

How to add a path related custom content type.







































































#1 Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

#2 Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.

Some example content with simple HTML. Some example content with simple HTML. Some example content with simple HTML.