LC Lightbox - jQuery Plugin

Basic

Once files has been added to your webpage, you're ready to initialize LC Lightbox.
This is the most essential implementation, showing multiple images and using default lightbox settings:

	
		
	
	
		
	

	
<script type='text/javascript'>
$(document).ready(function() {
	var $obj = lc_lightbox('#lcl_elems_wrapper a');
});
</script>

By default title, data-lcl-txt and data-lcl-author attributes are fetched. They are optional.
Is also possible to change attribute names or use inner selectors (check options chapter to know more).

IMPORTANT: lc_lightbox() function returns the initialized instance ($obj), to be used in public methods.

Multiple Content Types

LC Lightbox supports multiple content types that can be mixed together.

• Images
• Youtube videos
• Vimeo videos
• Dailymotion videos
• HTML5 videos
• Iframes
• HTML contents

Here's an example wrapping together all of them:

	
		
	
	 <!-- use video URL -->
		
	
	 <!-- use video URL -->
		
	
	 <!-- use video URL -->
		
	
	
		
	
	
		
	
	
		
	


<!-- HTML contents to show -->

	
Lorem ipsum dolor sit amet ..

	
<script type='text/javascript'>
$(document).ready(function() {
	lc_lightbox('#lcl_elems_wrapper a');
});
</script>

HTML5 video note: You can specify multiple video extensions simply using multiple sources split by a semicolon.

HTML contents note: the source attribute must contain a selector pointing to contents wrapper.

Utility Attributes

There are several fixed attributes you can use to set custom element behaviors and to set specific data.
They are optional and have to be applied to target elements. For example:

Here's the list:

Custom sizing notes regarding videos

Use both width and height to define a new aspect ratio, otherwise the default 16/9 ratio will be used

Custom sizing notes regarding html and iframe

Use both width and height to define a new aspect ratio, otherwise the missing parameter will be inherited from global sizing settings.
HTML elements don't have a minimum height

Live Elements Tracking

LC Lightbox can be initialized using a static DOM object or also specifying a selector (as done in previous examples).

There's a substantial differnce between these two systems: using a selector the plugin will keep listening to DOM structure.
Then DOM changes (eg. added or removed elements) will be managed on lightbox opening.

<script type='text/javascript'>
$(document).ready(function() {
	
	// static initialization 
	var $obj = $('#lcl_elems_wrapper a')
	lc_lightbox($obj);
	
	// dynamic initialization
	lc_lightbox('#lcl_elems_wrapper a');
});
</script>

Direct Array Initialization

You can also initialize LC Lightbox directly, passing an objects array with a predefined structure.
Here's an example using multi-type sources and also utility attributes.

<script type='text/javascript'>
$(document).ready(function() {
	
	var data = [
		{
			type			: 'image',
			src 			: 'image url',
			title			: 'the title',
			txt 			: 'the description',
			author			: 'the author',
			thumb			: 'smaller image URL to use in thumbs navinations'
			force_outer_cmd : true,
			download		: 'image path',
			canonical_url	: 'unique reference url'
		},
		{
			type	: 'video',
			src 	: 'html5 video url',
			width	: '50%',
			height	: '45%',
			poster	: 'image URL to use as video poster'
		},
	];
	
	var $instance = lc_lightbox(data);
	var index = 0;
	lcl_open($instance, index); // direct lightbox opening showing first element
});
</script>

Type names are: image, video, youtube, vimeo, dailymotion, html and iframe.
Other keys have been explained previously in this section.