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.
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.
No comments:
Post a Comment