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.

Features:

• 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="//code.jquery.com/jquery.min.js"></script>
<script src="src/js/lightcase.js"></script>

2. Include the jquery.events.touch.js for touch events support.

<script src="vendor/jQuery/jquery.events.touch.js"></script>

3. Create a single image lightbox.

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

$('.demo').lightcase();

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>

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

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

$('.demo').lightcase();

5. Load data from inline elements within the document.

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

<div id="inline">
  ...
</div>

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

<a id="example" class="demo" href="//www.youtube.com/embed/VIDEOID" 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',
  'navigator.next': 'Next',
  'navigator.play': 'Play',
  'navigator.pause': 'Pause'
},

8. Callback functions.

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

Changelog:

2019-01-11

• 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.