#lightbox tutorial

[bibeva]

Simple JQuery Lightbox Tutorial

In this Video, I'll be showing how to make Simple Jquery Lightbox Tutorial. ---------------------------------------------------------------------------------...

Make Simple JQuery Lightbox Tutorial

[htmluse]

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

Download   Demo

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.