dcbox

DcBox.js

Summary

DcBox.js is the easiest way to organize your gallery! Only one JS file necessary for the gallery to work. Demo http://dcversus.github.io/dcbox/

Browser support

• IE 9+
• Firefox 3+
• Chrome 4+
• Safari 3.1+
• Opera 10.1+
• Android 2.1+

Install

Add dcbox.js before the body closing tag and add config (optional). All styles and html markup is included in the JS file (use base64). For init gallery you need to provide a structure: gallery tag with class 'dcbox' in which you link a href to the full-sized image (or youtube link) and preview image\structure inside. For example:

<div class="dcbox">
  <a href="fullimage.jpg"><img src="img/thumb.jpg"></a>
  <a href="http://www.youtube.com/watch?v=M97GLlaWUcM"><img src="img/youtubethumb.jpg"></a>
  <!--...-->
</div>
<!--...-->
<script src="dcbox.js"></script>
</body>

Or you can use one element on gallery like this:

<a class="dcbox" href="fullimage.jpg"><img src="img/thumb.jpg"></a>
<!--...-->
<script src="dcbox.js"></script>
</body>

Configuration

You can also use global settings like this (all settings are optional):

<script>
var dcboxConfig = { //in example default configuration
  controls: true, //display control elements, 
  close: false, //close by clicking in the void 
  boxed: false, //open in a small window
  zoom: true, //allow scaling
  iframe: false, //the defaults links opens IMG tags, if the link is youtube the gallery element opens in an iframe. This option opens all links in an iframe.
  gal: 'dcbox' //class name that is considered as a gallery
};
</script>
<script src="dcbox.js"></script>
</body>

You can also use inline settings: (all setting allowed exept 'gal')

<div class="dcbox" data-dcbox="{boxed: true}">
  <a href="fullimage.jpg"><img src="img/thumb.jpg"></a>
  <!--...-->
</div>
<div class="dcbox" data-dcbox="{controls: false,close: true}">
  <a href="fullimage.jpg"><img src="img/thumb.jpg"></a>
  <!--...-->
</div>
<!--...-->
<script src="dcbox.js"></script>
</body>

Usage

To control the gallery, you can use the keyboard: esc: close gallery, enter: fullscreen\box view, left arrow: prev image, right arrow: next image;

Also you can use gestures and mouse: dblclick: zoom x2 and return zoom x1, left-to-right swipe: prev image, right-to-left swipe: next image, mouse and touch drag (on zoomed image): drags the image;