New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/lightcase-smart-and-flexible-lightbox-plugin/
Lightcase - Smart and flexible Lightbox Plugin
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.
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.
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.
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.
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>
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>
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>
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>
jQuery(document).ready(function($) $('a[data-rel^=lightcase]').lightcase(); );
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 );
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'); );
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">
The table below is a complete reference to all options which could be used to customize your Lightcase Plugin.
