Load jQuery, magic-lightbox.min.css, magic-lightbox.min.js and optionaly mlb-ie8-min.css and mlb-ie8-min.js:
If you don't like IE8, you can use this code:
Define options:
Create a new object of the MagicLightBox class:
var lb = MagicLightBox(options);
You can define properties on 3 levels: general, views and markup.
General properties are applicable for all views and triggers. Some of these properties (but not all) can be overridden on the "view" level or by markup.
To move on this level you must define a "views" object which in turn is an array of objects:
Some of these properties (but not all) can be overridden by markup.
If you want the trigger to have a view, use a "data-view" attribute:
Views help us to specify properties which are general for a group of triggers (a view). Otherwise we had to define these properties for every trigger.
Moreover we couldn't work in an "image" mode without using views.
If you need to specify a property for a trigger, use markup.
Magic LightBox can work in 3 modes:
If you want Magic LightBax to work in the "image" mode, use the view "mode" property :
If you want Magic LightBax to work in the "html" mode, specify the "data-element" attribute:
Type: String
the string of "bottom" directional effects
Default: "fadebottom cubefadebottom cubefadebottommin columnbottom rowbottom colfadebottomdiamond colfadebottomwavy"
Example:
Type: String
the background color of shutters and openers
Default: rgb(169, 169, 169)
Example:
Type: Selector
Mode: AJAX
the selector of the element (with all child elements) that will be shown when AJAX content is loaded. All other content of the response from the server will be ignored.
Default: "#content"
Example:
Type: String
the list of effects (space separated)
Default: "cube rowleft columntop cubezoom cubemin cubezoommin cubezoomminwavy zoom fade fadetop fadebottom fadeleft faderight cubefadetop cubefadebottom cubefadeleft cubefaderight cubefadetopmin cubefadebottommin cubefadeleftmin cubefaderightmin cuberollleftmin cuberollrightmin cuberollleft cuberollright rollleft rollright columnbottom rowright rowtop rowbottom columnleft columnright row column rowcontra columncontra rowcontramin columncontramin rowmin columnmin cubefadetopleft cubefadetopright cubefadebottomleft cubefadebottomright cubefadecontrah cubefadecontrav cuberolcontra cuberolcontramin cuberotate columnzoom rowzoom colfadetopdiamond colfadetopwavy rowfadeleftdiamond rowfadeleftwavy colfadediamond colfadewavy rowfadediamond rowfadewavy columnfadediamond columnfadewavy rowfadecontradiamond rowfadecontrawavy rowfaderightdiamond rowfaderightwavy colfadebottomdiamond colfadebottomwavy"
Example:
Type: String
The style for the background image.
if you want an image to be included to animation as a background you should define this parameter.
Example:
imageCss: "background-image: url(images/gallery/info-bg.png); background-repeat: repeat;"
Type: String
The style for the background image that will be applied if a width of the Window <= 500px
Example:
imageCss: "background-image: url(images/gallery/info-bg-1.png); background-repeat: repeat;"
Type: Boolean
Mode: image
if the value is true the bottom menu will be switched on when you initially open the LightBox.
Default: true
Example:
Type: Boolean
Mode: image
if the value is true the top menu will be switched on when you initially open the LightBox.
Default: true
Example:
Type: String
the string of "left" directional effects
Default: "rowleft fadeleft cubefadeleft cubefadeleftmin cuberollleftmin cuberollleft rollleft columnleft colfadewavy rowfadeleftwavy"
Example:
Type: Function
the function that should be executed when the content is loaded to the LightBox
Example:
Type: Function
the function that should be done on MagicLightBox render
Example:
Type: String
the string of "right" directional effects
Default: "faderight cubefaderight cubefaderightmin cuberollrightmin cuberollright rollright rowright columnright rowfaderightdiamond rowfaderightwavy"
Example:
Type: Boolean
if the value is true the array of effects will be shuffled
Default: true
Example:
Type: String
the text that will be shown as a slogan
Example:
slogan: "Magic LightBox",
Type: String
The style for the slogan
Example:
Type: String
The style for the slogan if a width of the Window <= 500px
Example:
Type: String
the string of "top" directional effects
Default: "columntop fadetop cubefadetop cubefadetopmin rowtop colfadetopdiamond colfadetopwavy rowfadewavy"
Example:
topEffects: "colfadetopdiamond colfadetopwavy rowfadewavy"
Type: Object
the object that contains pairs of events (key) and selectors (value). Required.
Example:
Type: Object
the object that is used to define views parameters. You can define as many views as you want in a form of:
views: {
viewName: {params...},
viewName: {params...},
}
Example:
Views allow to define different properties for different kinds of content. In other words if you have got content with similar properties you can group it in one view.
If you want to specify that the resource should be loaded with parameters of a certain view you should use a data-view attribute:
<a class="employee ajax" href="employee.php?id=1" data-view="card">
Type: String
the background color of shutters and openers
Default: rgb(169, 169, 169)
Overrides the general "color" property
Example:
Type: Selector
Mode: AJAX
the selector of the element (with all child elements) that will be shown when AJAX content is loaded. All other content of the response from the server will be ignored.
Default: "#content"
Overrides the general "content" property
Example:
Type: String
the class, that will be added to the "#pm-fixed" element (the root element of Magic LightBox)
Default: the name of the view
Example:
Type: String
the name of the effect for this view. If it is defined, only this effect will be used.
Example:
Type: Boolean
Mode: image
if the value is true the native fullscreen support is switched on
Default: false
Example:
Type: Selector
Mode: image
the selector of the element that contains all images of the gallery. If this property is defined Magic LightBox works in an image mode but with some additional features: buttons "back" and "forward", keyboard events support, mousewheel events support, swipe event support.
Example:
Type: String
The style for the background image.
if you want an image to be included to animation as a background you should define this parameter.
Example:
imageCss: "background-image: url(images/gallery/info-bg.png); background-repeat: repeat;"
Type: String
The style for the background image that will be applied if a width of the Window <= 500px
Example:
imageCss: "background-image: url(images/gallery/info-bg-1.png); background-repeat: repeat;"
Type: Boolean
Mode: image
if the value is true directional effects will be applied
Example:
Type: Boolean
if the value is true the native browser history support is switched on
Default: true
Example:
Type: String
the custom event that will be fired when the content is loaded to the lightBox
Default: the name of the view
Example:
Type: String
if the value is "image", the image mode is switched on, otherwise the image mode is switched off
Example:
Type: Function
the function that should be executed when the content is loaded to the LightBox
Example:
Type: Function
the function that should be executed when the content is being removed from the lightBox
Example:
Type: Integer
Mode: image
time in seconds during which the image is displayed when a slideshow has been switched on
Example:
Type: Boolean
This property adds the possibility of a slideshow
Default: false
Example:
Type: String
the text that will be shown as a slogan
Overrides the general "slogan" property.
Example:
Type: String
The style for the slogan
Example:
Type: String
The style for the slogan if a width of the Window <= 500px
Type: String
the custom event that will be fired before the content is removed from the lightBox panel
Example:
Type: String
the string that must be added to the url to notify the server that it is an ajax request
Example:
| attribute | description |
|---|---|
| data–color |
the background color of shutters and openers. Default: rgb(169, 169, 169) Example: <p class="but-p">
<a class="btn btn-primary btn-lg no-ajax"
href="" role="button"
data-color="gray"
data-element ="#element"
>Choose Your Effect!</a>
</p>
|
| data–content |
the selector of the element (with all child elements) that will be shown when AJAX content is loaded. All other content of the response from the server will be ignored. Default: "#content" Overrides general and view "content" properties. Example: <p class="but-p">
<a href="staff/employee.php?id=1&tab=send"
class="btn btn-default ajax"
data-view="card"
data-content="#ajax-content"
>Go!</a>
</p>
|
| data–css–class |
the class, that will be added to the "#pm-fixed" element (the root element of Magic LightBox) Example: Default: the name of the view <p class="but-p">
<a href=""
class="no-ajax btn btn-default"
data-element="#element8"
data-view="gallery_items"
data-css-class="black"
>Go!</a>
</p>
|
| data–direction |
If it is defined, the direction of directional effects. Example: <p class="but-p">
<a href=""
class="no-ajax btn btn-default"
data-element="#element8"
data-view="gallery_items"
data-direction="top"
>Go!</a>
</p>
|
| data–effect |
the name of the effect. Example: <p class="but-p">
<a href=""
class="no-ajax btn btn-default"
data-element="#element8"
data-view="gallery_items"
data-effect="fadetop"
>Go!</a>
</p>
|
| data–effects |
if this attribute has a value "no", the function "link" will be applied instead of "show", i.e. if the lightBox panel is opened, another ajax content will be loaded, but no effects will be used and no changes in the window.history will be made as well. If the lightBox panel is not opened, the "link" function will open it and load the ajax content but won't make changes in the window.history. This attribute can belong to elements that defined in the "triggers" object. Example: <a href="index.php?sort=name" data-view="table" data-effects="no" class="ajax">Sort by name</a> |
| data–element |
The selector of an element. If this attribute is defined the lightBox works in "html" mode. The content of the lightBox will be replaced by the defined element. Example: <p class="but-p">
<a href=""
class="no-ajax btn btn-default"
data-element="#element8"
data-view="gallery_items"
>Go!</a>
</p>
|
| data–history |
if the value is "true" or "True" or "TRUE", the native browser history support is switched on, otherwise the native browser history support is switched off. Default: "true" Overrides the view "isHistory" property. Example: <p class="but-p">
<a href=""
class="no-ajax btn btn-default"
data-history="TRUE"
data-view="gallery_items"
>Go!</a>
</p>
|
| data–href |
defines an URL of the resource. If it is not defined, the value of the "href" attribute will be taken instead. Example: <a href="https://www.flickr.com/photos/hugo_poon/11946102783"
title="my "little room" by hugo poon, on Flickr"
data-href="https://farm4.staticflickr.com/3777/11946102783_4a61a8740c_o.jpg"
class="no-ajax"
data-view="image_gallery"
>
...
</a>
|
| data–image–css |
The style for the background image. If you want an image to be included to animation as a background you should define this parameter. Example: <a href="images/gallery/forest2.jpg" class="no-ajax"
data-view="image_base"
data-image-css = "background-image: url(images/gallery/forest-vangogh.jpg) "
>
...
</a>
|
| data–image–css–mobile |
The style for the background image that will be applied if a width of the Window <= 500px Example: <a href="images/gallery/forest2.jpg" class="no-ajax"
data-view="image_base"
data-image-css = "background-image: url(images/gallery/forest-vangogh.jpg)"
data-image-css-mobile = "background-image: url(images/gallery/forest-compact.jpg)"
>
...
</a>
|
| data–loaded–event |
the custom event that will be fired when the content is loaded to the lightBox. Example: <a href="images/gallery/forest2.jpg" class="no-ajax"
data-view="image_base"
data-loaded-event= "baseLoaded"
>
...
</a>
|
| data–slogan |
the text that will be shown as a slogan. Overrides general and view "slogan" properties. Example: <a href="images/gallery/forest2.jpg" class="no-ajax"
data-view="image_base"
data-slogan= "Magic LightBox"
>
...
</a>
|
| data–slogan–css |
The style for the slogan Example: <a href="images/gallery/forest2.jpg" class="no-ajax"
data-view="image_base"
data-slogan-css= "font-size: 100px;"
>
...
</a>
|
| data–slogan–css–mobile |
The style for the slogan if a width of the Window <= 500px Example: <a href="images/gallery/forest2.jpg" class="no-ajax"
data-view="image_base"
data-slogan-css= "font-size: 100px;"
data-slogan-css-mobile= "font-size: 50px;"
>
...
</a>
|
| data–unload–event |
the custom event that will be fired before the content is removed from the lightBox panel. Example: <a href="images/gallery/forest2.jpg" class="no-ajax"
data-view="image_base"
data-unload-event= "baseUnload"
>
...
</a>
|
| data–view |
defines the name of the view. This attribute can belong to elements that defined in the "triggers" object. Example: <a href="images/gallery/forest2.jpg" class="no-ajax"
data-view="image_base"
>
...
</a>
|
| data–viewer–bottom–menu |
The selector of the element that must be loaded to the bottom menu. This attribute is applicable for the "image" mode only. Example: <a href="https://www.flickr.com/photos/bryaniceman/16447060430"
title="Sydney Harbour by Bryan Leung, on Flickr"
class="no-ajax"
data-href="https://farm9.staticflickr.com/8616/16447060430_d964ee5dc6_h.jpg"
data-view="inline_gallery"
data-viewer-bottom-menu ='#element11'
>
...
</a>
|
| data–viewer–title |
The text that will be the bottom caption. This attribute is applicable for the "image" mode only. Example: <a href="https://www.flickr.com/photos/bryaniceman/16447060430"
title="Sydney Harbour by Bryan Leung, on Flickr"
class="no-ajax"
data-href="https://farm9.staticflickr.com/8616/16447060430_d964ee5dc6_h.jpg"
data-view="inline_gallery"
data-viewer-title = 'Sydney Harbour by Bryan Leung'
data-viewer-top-menu ='#element9'
>
...
</a>
|
| data–viewer–top–menu |
The selector of the element that must be loaded to the top menu. This attribute is applicable for the "image" mode only. Example: <a href="https://www.flickr.com/photos/bryaniceman/16447060430"
title="Sydney Harbour by Bryan Leung, on Flickr"
class="no-ajax"
data-href="https://farm9.staticflickr.com/8616/16447060430_d964ee5dc6_h.jpg"
data-view="inline_gallery"
data-viewer-title = 'Sydney Harbour by Bryan Leung'
data-viewer-top-menu ='#element9'
>
...
</a>
|
show(href, push, view, data) — shows the Magic LightBox panel and loads the content
parameters:
href — {Object} a Href object. By means of the Href Object you can transfer all necessary properties into the method. The Href Object may contain keys: href (analog of the data-href attribute), view (data-view), color (data-color), slogan (data-slogan), imageCss (data-image-css), sloganCss (data-slogan-css), imageCssMobile (data-image-css-mobile), sloganCssMobile (data-slogan-css-mobile), history (data-history), cssClass (data-css-class), loadedEvent (data-loaded-event), unloadEvent (data-unload-event), viewModeString (data-view-mode-string), content (data-content), direction (data-direction), effect (data-effect), element (data-element), viewerTitle (data-viewer-title), viewerBottomMenu (data-viewer-menu-bottom), viewerTopMenu (data-viewer-menu-top).
push — {boolean} if the value is true, the window.history.pushState method will be applied
data — {Object} or {String} custom data that will be added to the request
if {Object} — a POST request method will be applied
if {String} — a GET request method will be applied
Example:
open() — opens a current url in the browser
Example:
hide() — hides the Magoc LightBox panel
Example:
link(href) — if the lightBox panel is opened, loads another ajax content, but no effects are used and no changes in the window.history are made as well. If the lightBox panel is not opened, this method opens it and loads an ajax content but doesn't make changes in the window.history
href — {Object} a Href object. By means of the Href Object you can transfer all necessary properties into the method. The Href Object may contain keys: href (analog of the data-href attribute), view (data-view), color (data-color), slogan (data-slogan), imageCss (data-image-css), sloganCss (data-slogan-css), imageCssMobile (data-image-css-mobile), sloganCssMobile (data-slogan-css-mobile), history (data-history), cssClass (data-css-class), loadedEvent (data-loaded-event), unloadEvent (data-unload-event), viewModeString (data-view-mode-string), content (data-content), direction (data-direction), effect (data-effect), element (data-element), viewerTitle (data-viewer-title), viewerBottomMenu (data-viewer-menu-bottom), viewerTopMenu (data-viewer-menu-top).
Example:
getStatus() — Returns true if the lightBox panel is opened.
Example:
if(lb.getStatus()) lb.hide();
getIndex() — Returns the current index of the picture in the gallery.
Example:
go(strItems, strGallery, intIndex) — This method is used to open an element of the gallery from the script.
strItems — {String} Selector of items in the gallery
strGallery {String} Selector of the gallery. Default "body"
intIndex — {Integer} index of the element to be opened. Default 0
Example:
lb.go(".no-ajax", "#images-gallery", index);
| event | description |
|---|---|
| contentLoaded | is fired when content is loaded to the lightBox |
| ajaxError | is fired on ajax error in an ajax mode only |
| loaderHidden | is fired when the lightBox panel has been opend |
| openerEnd | is fired when animation of openers finished |
| shutterEnd | is fired when animation of shutters finished |
| close | is fired when the lightBox panel is closed |
| "View" level | Markup level | Description |
|---|---|---|
| loadedEvent | data-loaded-event | the custom event that will be fired when the content has been loaded to the lightBox |
| unloadEvent | data-unload-event | the custom event that will be fired before the content is removed from the lightBox |
On the "view" level the default value of the loaded event is the name of the view.
An event specified by markup doesn't override an event specified on the "view" level. Both events will be fired.