Fashion Responsive jQuery Lightbox Gallery Plugin - cm-overlay.js

Centered modal overlay is a jQuery plugin which allows you to navigate through a group of images (or iframes) in a responsive, full-page and mobile-friendly modal box. The plugin uses Stacklayout based CSS to vertically and horizontally centre a modal overlay.

Basic Usage:

1. Load the needed javascript libraries at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/jquery.cm-overlay.js"></script>

2. Load the required CSS into the head section of the document.

<link type="text/css" rel="stylesheet" href="css/cm-overlay.css" />

3. The markup triggers are always anchor. Target elements can be either an iframe (for youtube/vimeo videos) or an img tag. Triggers supply the target URL in the href attribute of an anchor.

• iframe: indicated by the presence of a 'rel' attribute on the trigger. just use '#' as a placeholder. maximum width = 1204px, iframe aspect ratio = 16:9
• img: indicated by the lack of a 'rel' attribute. maximum height = 90%

<div id="group-1">
  <a class="cm-overlay" href="1.jpg">One</a>
  <a class="cm-overlay" href="2.jpg">Two</a>
  <a class="cm-overlay" href="3.jpg">Three</a>
</div>
<div id="group-2">
  <a class="cm-overlay" href="4.jpg">Four</a>
  <a class="cm-overlay" href="5.jpg">Five</a>
  <a class="cm-overlay" href="6.jpg">Six</a>
</div>

4. Initialize the plugin with default settings.

 $('.cm-overlay').cmOverlay();

5. Available settings.

// set max width & aspect ratio (currently only applies to landscape iframes)
var maxWidth = 900,
    aspectRatio = 0.5625, // 16:9
// set max height for images (currently only applies to portrait images)
    maxHeightFraction = 0.9, // 90% height

---

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