Versatile Responsive jQuery LightBox Plugin - lightcase.js

File Size: 71.5 KB
Views Total: 13880
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Versatile Responsive jQuery LightBox Plugin - lightcase.js

lightcase.js is a simple, multi-purpose jQuery plugin used to create a responsive, CSS3 animated lightbox for any types of html elements. It is licensed under the GPL license.


  • CSS3 based animation effects: scrollTop, scrollRight, scrollBottom, scrollLeft, scrollHorizontal, scrollVertical, fade, fadeinline and elastic.
  • Supports any html elements such as images, DIVs, text, iframes, flashes, videos, etc.
  • Auto media type detection.
  • Ajax enabled.
  • Keyboard and touch swipe navigation.
  • Fully responsive and mobile friendly.
  • Allows to displays a group of elements like an automatic carousel / slideshow.

Basic usage:

1. Include the style sheet lightcase.css in the head section and the JavaScript lightcase.js at the end of the document.

<link href="src/css/lightcase.css" rel="stylesheet">
<script src="//"></script>
<script src="src/js/lightcase.js"></script>

2. Include the for touch events support.

<script src="vendor/jQuery/"></script>

3. Create a single image lightbox.

<a href="large.jpg" id="example" class="demo" data-rel="lightcase">
  <img src="small.jpg">

4. Create a fullscreen, navigatable gallery lightbox.

<a href="large-1.jpg" id="example" class="demo" data-rel="lightcase:myCollection:slideshow">
  <img src="small-1.jpg">

<a href="large-2.jpg" id="example" class="demo" data-rel="lightcase:myCollection:slideshow">
  <img src="small-2.jpg">

<a href="large-3.jpg" id="example" class="demo" data-rel="lightcase:myCollection:slideshow">
  <img src="small-3.jpg">

5. Load data from inline elements within the document.

<a id="example" class="demo" href="#inline" data-rel="lightcase">Inline</a>

<div id="inline">

6. Automatically detect the media type and display an Youtube Video in the lightbox.

<a id="example" class="demo" href="//" data-rel="lightcase">Youtube</a>

7. All configuration options.

idPrefix: 'lightcase-',
classPrefix: 'lightcase-',
attrPrefix: 'lc-',
transition: 'elastic',
transitionIn: null,
transitionOut: null,
cssTransitions: true,
speedIn: 250,
speedOut: 250,
maxWidth: 800,
maxHeight: 500,
forceWidth: false,
forceHeight: false,
liveResize: true,
fullScreenModeForMobile: true,
mobileMatchExpression: /(iphone|ipod|ipad|android|blackberry|symbian)/,
disableShrink: false,
shrinkFactor: .75,
overlayOpacity: .9,
slideshow: false,
timeout: 5000,
swipe: true,
useKeys: true,
useCategories: true,
navigateEndless: true,
closeOnOverlayClick: true,
title: null,
caption: null,
showTitle: true,
showCaption: true,
showSequenceInfo: true,
inline: {
  width: 'auto',
  height: 'auto'
ajax: {
  width: 'auto',
  height: 'auto',
  type: 'get',
  dataType: 'html',
  data: {}
iframe: {
  width: 800,
  height: 500,
  frameborder: 0
flash: {
  width: 400,
  height: 205,
  wmode: 'transparent'
video: {
  width: 400,
  height: 225,
  poster: '',
  preload: 'auto',
  controls: true,
  autobuffer: true,
  autoplay: true,
  loop: false
attr: 'data-rel',
href: null,
type: null,
typeMapping: {
  'image': 'jpg,jpeg,gif,png,bmp',
  'flash': 'swf',
  'video': 'mp4,mov,ogv,ogg,webm',
  'iframe': 'html,php',
  'ajax': 'json,txt',
  'inline': '#'
errorMessage: function () {
  return '<p class="' + _self.settings.classPrefix + 'error">' + _self.settings.labels['errorMessage'] + '</p>';
labels: {
  'errorMessage': 'Source could not be found...',
  'sequenceInfo.of': ' of ',
  'close': 'Close',
  'navigator.prev': 'Prev',
  '': 'Next',
  '': 'Play',
  'navigator.pause': 'Pause'

8. Callback functions.

onInit: {},
onStart: {},
onFinish: {},
onClose: {},
onCleanup: {}



  • v2.5.0

This awesome jQuery plugin is developed by cbopp-art. For more Advanced Usages, please check the demo page or visit the official website.