Lightcase - Smart and flexible Lightbox Plugin

Nov 22, 2014 in Lightbox 12445 views

Download

Overview
Documents

User Rating: 4.4/5 ( 2 votes)

Your Rating:

Lightcase is a beautiful, flexible and even accessible web application to present the most of common media formats in an exposed Lightbox. This Lightbox Plugin is based on the jQuery Framework and works fine in all common browsers like Internet Explorer 7+, Firefox, Opera, Webkit and more.

Why using Lightcase?

Nice features.

Lightcase includes a lot of different animation types to popup medias and is easy to configure speed, size or whether Lightcase should use several links as series, and so on.

Easy to customize.

The code allows to customize this plugin for someone’s own wants. Even the markup is modifiable, and the layout is also very comfortable to restyle.

Autodetect media formats.

Lightcase is smart and genious. You don’t have to define which format your media has. So the embed area for your linked media would be created automatically.

Responsive dimensions.

Don’t take care about width or height of the expanding box. A sophisticated function calculates the dimensions from the provided browser size.

Less and wellformed code.

Lightcase is coded with the principle 'Less is more'. This means that features are as efficiently and effectively as possible with least of code and redundance.

It's accessible.

Not at least, Lightcase supports to open and navigate through with the keyboard only and uses valid markup code.

Source: cornel.bopp-art.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="path/to/lightcase.css" media="screen">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="path/to/lightcase.js"></script>

2. HTML

To open your media with Lightcase, create a link and add the attribute data-rel="lightcase".

<a href="path/to/media.jpg" data-rel="lightcase">Your link description or thumb</a>

If you want to display a title, simply add the attribute title="Your title".

<a href="path/to/media.jpg" data-rel="lightcase" title="Your title">Your link description or thumb</a>

Groups

Multiple links with the same attribute, e.g. data-rel="lightcase:group", would open all them as a group.

<a href="path/to/media.jpg" data-rel="lightcase:group" title="Your title">Your link description or thumb</a>

Slideshow

Multiple links with the same attribute, e.g. data-rel="lightcase:group:slideshow", would open them as slideshow.

<a href="path/to/media.jpg" data-rel="lightcase:group:slideshow" title="Your title">Your link description or thumb</a>

3. JAVASCRIPT

jQuery(document).ready(function($) { 
  $('a[data-rel^=lightcase]').lightcase();
});

4. ADVANCED

Options

Lightcase provides certain options to customize links and override the default settings. All options are described at the section API.

$('a[data-rel=lightcase:group:slideshow]').lightcase({
	transition : 'elastic'
	,showSequenceInfo : false
});

Interfaces

There are two functions to intervene into the process. This may could be useful if you want to execute an external function.

$('a[data-rel=lightcase:group:slideshow]').lightcase({
		// Would be called before generating content
	onStart : function() {
		alert('Lightcase process is started');
	}
		// Would be called just showing the generated content
	,onFinish : function() {
		alert('Lightcase process is finished');
	}
});

Mobile

Swipe

To activate swipe event, you have to set the option 'swipe' to 'true' and furthermore to include the swipe event:

<script type="text/javascript" src="path/to/jquery.events.swipe.js"></script>

Fullscreen mode for mobile

Lightcase provides a separate fullscreen mode for mobile devices. You just have to ensure that the option 'fullscreenModeForMobile' is activated and for a proper display the following meta tag is included in <head> of your source code:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

5. API

The table below is a complete reference to all options which could be used to customize your Lightcase Plugin.

Property	Type	Default	Description
id	String	'lightcase-case'	Identifier name for the outermost tag.
tempIdPrefix	String	'lightcase-temp-'	Identifier prefix for the temporarily cloned content. (since v1.1.0)
classPrefix	String	'lightcase-'	Class name prefix for the lightcase objects. (since v1.3.0)
transition	String	'elastic'	Transition between the sequences for groups and slideshow. Available values are 'none', 'fade', 'fadeInline', 'elastic', 'scrollTop', 'scrollRight', 'scrollBottom', 'scrollLeft', 'scrollHorizontal' and 'scrollVertical'.
transitionIn	String	null	Extra definition for the 'in' transition. (since 1.4.0)
transitionOut	String	null	Extra definition for the 'out' transition. (since 1.4.0)
cssTransitions	Boolean	true	Enable transitions with css. (since 1.4.0)
speedIn	Integer	350	Animation speed for the starting transition.
speedOut	Integer	250	Animation speed for the ending transition.
maxWidth	Integer	800	Maximum width for the media content.
maxHeight	Integer	500	Minimum height for the media content.
forceWidth	Boolean	false	Force width to prevent from shrinking. (since v1.1.0)
forceHeight	Boolean	false	Force height to prevent from shrinking. (since v1.1.0)
liveResize	Boolean	true	Enable live resize. (since v1.2.0)
fullScreenModeForMobile	Boolean	true	Enable fullscreen mode for mobile devices. (since v1.3.0)
mobileMatchExpression	RegExp	/(iphone\|ipod\|ipad...)/	Mobile devices which should make use of fullscreen mode. (since v1.3.2)
disableShrink	Boolean	false	Disable the shrink completely. (since v1.1.0)
shrinkFactor	Integer	.75	Factor (in percent) to shrink the media content to recalculate dimensions.
overlayOpacity	Integer	.9	Factor (in percent) for the overlay opacity.
slideshow	Boolean	false	Default slideshow initialization for groups.
timeout	Integer	5000	Delayed time between the slideshow sequences.
swipe	Boolean	true	Enable swipe event for mobile devices. (since v1.4.0)
useKeys	Boolean	true	Activate keys to navigate.
navigateEndless	Boolean	true	If enabled, the slideshow will be never ending.
closeOnOverlayClick	Boolean	true	Close Lightcase on overlay click.
showTitle	Boolean	true	Display title defined if the link attribute is set.
showCaption	Boolean	true	Display caption from the attribute 'alt'.
showSequenceInfo	Boolean	true	Display information about the current sequence in groups.
inline	Object	width : 'auto' ,height : 'auto'	Options would be passed to the inline element.
ajax	Object	width : 'auto' ,height : 'auto' ,type : 'get' ,dataType : 'html' ,data : {}	Option would be passed to the ajax element. (since v1.3.0) Option would be passed to the ajax element. (since v1.3.0) Type of request like 'get' or 'post' (since v1.5.0) DataType of response like 'html', 'text', 'json', ... (since v1.5.0) Data for request like a serialized array (since v1.5.0)
iframe	Object	width : 'auto' ,height : 'auto' ,frameborder : 0	Options would be passed to the iframe element.
flash	Object	width : 400 ,height : 205 ,wmode : 'transparent'	Options would be passed to the flash element.
video	Object	width : 400 ,height : 225 ,poster : '' ,preload : 'auto' ,controls : true ,autobuffer : true ,autoplay : true ,loop : false	Options would be passed to the video element.
type	String	null	Force data type definition like 'inline' or 'ajax'. (since v1.4.2)
typeMapping	Object	'image' : 'jpg,...' ,'flash' : 'swf' ,'video' : 'mp4,...' ,'iframe' : 'html,...' ,'ajax' : 'txt' ,'inline' : '#'	Mapping for the media types. (since v1.4.0)
errorMessage	String	'<p class="lightcase-error"...	Markup of the error message.
markup	Function	function() { $('body').append(... }	Browse the whole the function in the source file 'lightcase.js'.
onInit	Function	function() {}	Hook function which will be executed before process initialization. (since v1.5.0)
onStart	Function	function() {}	Hook function which will be executed before generating content.
onFinish	Function	function() {}	Hook function which will be executed after generating content.

JS Tutorial

Lightcase - Smart and flexible Lightbox Plugin

Why using Lightcase?

Related Articles