JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/examples/main_files/jquery.js"></script>
<link rel="stylesheet" href="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/examples/main_files/cube_gallery.css">
<link rel="stylesheet" href="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/assets/css/bootstrap.css">
<script src="http://www.defie.co/designerImages/thumbnails/inventory.png"></script>
<link rel="stylesheet" href="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/assets/css/bootstrap-responsive.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template · Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Le styles -->
<link href="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css"...
CSS
.caption {
height:90px !important;
}
JavaScript
/*
|------------------------------------------|
| MelonHTML5 - 3D Cube Gallery |
|------------------------------------------|
| @author: Lee Le ([email protected]) |
| @version: 1.02 (09 Jan 2013) |
| @website: www.melonhtml5.com |
|------------------------------------------|
*/
Gallery = {
_config: {
speed: 500,
size: 100,
lightbox: !0,
closeOnEsc: !0,
animation: "default",
slideshow: !1,
slideshow_speed: 3E3,
cube_speed: 1E3
},
lightbox_speed: 300,
window_width: null,
window_height: null,
_cube_timeout: null,
_gallery: null,
_overlay: null,
_lightbox: null,
_current: null,
_in_slideshow: !1,
init: function () {
Gallery._buildContainer(!0, !0);
Gallery.window_width = $(window).width();
Gallery.window_height = $(window).height();
$(document).keydown(Gallery.Events.keyDown);
$(window).resize(Gallery.Events.windowResize);
Gallery._startCube()
},
_buildContainer: function (a, b) {
Gallery._gallery = $("div.melonhtml5_gallery");
var c = Gallery._gallery.children("div:visible");
a && c.width(Gallery._config.size).height(Gallery._config.size);
c.each(function () {
var a = $(this),
c = a.data("image"),
g = new Image;
g.src = c;
g.complete ? Gallery._buildImage(a, b, c, g.width, g.height, a.data("caption")) : g.onload = function () {
Gallery._buildImage(a, b, c, this.width, this.height, a.data("caption"))
}
})
},
_buildImage: function (a, b, c, f, h, g) {
a.addClass("loaded");
var d = a.width(),
j = a.height(),
k = f / h;
if (k > d / j) var m = j,
n = k * m,
k = "horizontal",
l = n - d;
else n = d, m = n / k, k = "vertical", l = m -...