LightMyBox by pooyarm

How to use

Very easy. Buy LighyMyBox then include it in your page. Code your html as normal, create links to images then call LightMyBox, no more...

$(document).ready(function(){
  $('.lightmybox').lightmybox();
});

There are plenty of options you can play with.

Options

Option	Values	Default	Description
mode	'slideshow' 'single'	'slideshow'	In slideshow mode, there is next/previous links so user can navigate through your images [Check Example 1] but in single mode there isn't any way to go next or previous [Check Example 2]
bg	'color' 'image' 'pixelate'	'image'	if you want a solid color for background, use 'color' if you want image in background, use 'image' and finally if you want pixelated version of image in background, use 'pixelate'
color	'auto' color hexacode	'auto'	when 'bg' is 'color', you can set color option, if you set it 'auto', it will set background color based on image master color, also you can set a color for background, by color hexacode, for example: *color: '#e53737'*
theme	'dark' 'light' custom	'dark'	There are two themes by default, 'dark' and 'light' Also you can create your own theme, set name of theme and customize it by it's classname like this lightmybox-theme-[THEME-NAME] if your theme name be 'red' you should play with classname lightmybox-theme-red
blur	Integer	5	How much blur you want for background, you can use it when 'bg' is 'image'. put 0 to disable. supports just modern browsers.
duration	Integer	400	You can control speed of animations with this option.
height	'fit' 'fullscreen'	'fit'	If you want a fullscreen lightbox, set it 'fullscreen'.
nextPrevLinks	true false	true	If you don't want to show next previous links, set it false.
keyboard	true false	true	To disable navigation with keyboard, set it false.
callbacks	object of functions		You can define custom functions for custom callbacks

Callbacks

Here is callbacks for your customization:

beforeShow it fires after user clicks on item and before starting animation starts.
afterShow it fires just right after starting animation ends.
beforeNext when user requests for next item, this function fires, just before animation starts.
afterNext this function fires when next item shown and right after animation.
beforePrevious when user requests for previous item, this function fires, just before animation starts.
afterPrevious this function fires when previous item shown and right after animation.
beforeClose it fires after user requests to close lightbox and before close animation starts.
afterShow it fires just right after close animation ends.

For example:

$(document).ready(function(){
  $('.lightmybox').lightmybox({
    callbacks: {
      beforeShow:   function() { console.log('beforeShow'); },
      afterShow:  function() { console.log('afterShow'); },
      beforeNext:   function() { console.log('beforeNext'); },
      afterNext:  function() { console.log('afterNext'); },
      beforePrevious: function() { console.log('beforePrevious'); },
      afterPrevious:  function() { console.log('afterPrevious'); },
      beforeClose:  function() { console.log('beforeClose'); },
      afterClose:   function() { console.log('afterClose'); },
    }
  });
});

Examples

Example 1: Default Style

$(".lightmybox").lightmybox();

Example 2: Single Mode

$(".lightmybox").lightmybox({
  mode: 'single'
});

Example 3: Auto Color Background

$(".lightmybox").lightmybox({
  bg: 'color',
  color: 'auto'
});

Example 4: Pixelate Image Background

$(".lightmybox").lightmybox({
  bg: 'pixelate'
});

Example 5: Fullscreen

$(".lightmybox").lightmybox({
  height: 'fullscreen'
});

Support

Having trouble with LightMyBox? need support? I'm here #.