Merge pull request #51 from jbutz/bootstrap3

Bootstrap 3 Compatibility

README.md

@@ -16,15 +16,14 @@ Example
 
 ```html
 <a data-toggle="lightbox" href="#demoLightbox">Open Lightbox</a>
-<div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
-	<div class='lightbox-header'>
-		<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button>
-	</div>
-	<div class='lightbox-content'>
-		<img src="image.png">
-	</div>
-	<div class='lightbox-footer'>
-		<button class="btn btn-small btn-primary">Click</button>
+<div id="demoLightbox" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
+	<div class='lightbox-dialog'>
+		<div class='lightbox-content'>
+			<img src="image.png">
+			<div class='lightbox-caption'>
+				Your caption here
+			</div>
+		</div>
 	</div>
 </div>
 ```

component.json

@@ -1,9 +1,9 @@
 {
 	"name": "bootstrap-lightbox",
-	"version": "1.0.0",
-	"main": ["docs/assets/js/bootstrap-lightbox.js","docs/assets/css/datepicker.css"],
+	"version": "0.6.2",
+	"main": ["docs/assets/js/bootstrap-lightbox.js","docs/assets/css/bootstrap-lightbox.css"],
 	"dependencies": {
 		"jquery" : ">=1.7.1",
-		"bootstrap" : ">=2.0.4 <3.0"
+		"bootstrap" : ">=3"
 	}
 }

docs/assets/css/bootstrap-lightbox.css

@@ -3,49 +3,80 @@
 * Copyright 2013 Jason Butz
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 */
+.lightbox-open {
+  overflow: hidden;
+}
+
+body.lightbox-open,
+.lightbox-open .navbar-fixed-top,
+.lightbox-open .navbar-fixed-bottom {
+  margin-right: 15px;
+}
+
 .lightbox {
-  position: relative;
-  top: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  display: none;
+  overflow: auto;
+  overflow-y: scroll;
+}
+
+.lightbox .fade .lightbox-dialog {
+  -webkit-transform: translate(0, -25%);
+      -ms-transform: translate(0, -25%);
+          transform: translate(0, -25%);
+  -webkit-transition: -webkit-transform 0.3s ease-out;
+     -moz-transition: -moz-transform 0.3s ease-out;
+       -o-transition: -o-transform 0.3s ease-out;
+          transition: transform 0.3s ease-out;
+}
+
+.lightbox .in .lightbox-dialog {
+  -webkit-transform: translate(0, 0);
+      -ms-transform: translate(0, 0);
+          transform: translate(0, 0);
+}
+
+.lightbox .lightbox-dialog {
   z-index: 1050;
-  line-height: 0;
-  text-align: center;
-  background-color: transparent;
-  outline: none;
+  width: auto;
+  /*padding: 10px;*/
+
+  margin-right: auto;
+  margin-left: auto;
 }
 
-.lightbox .hide {
-  display: none;
+.lightbox .lightbox-dialog .lightbox-header {
+  float: right;
 }
 
-.lightbox .in {
-  display: block;
+.lightbox .lightbox-dialog .lightbox-header .close {
+  margin-top: -2px;
 }
 
-.lightbox-content {
+.lightbox .lightbox-dialog .lightbox-content {
+  position: relative;
   display: inline-block;
   padding: 10px;
   background-color: #ffffff;
-  border: 1px solid #999;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  *border: 1px solid #999;
-  /* IE6-7 */
-
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding-box;
-          background-clip: padding-box;
+  border: 1px solid #999999;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  outline: none;
+  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  background-clip: padding-box;
 }
 
-.lightbox-content .lightbox-caption {
+.lightbox .lightbox-dialog .lightbox-content .lightbox-caption {
   position: absolute;
-  right: 12px;
-  bottom: 11px;
-  left: 11px;
+  right: 8px;
+  bottom: 8px;
+  left: 10px;
   padding: 2%;
   font-size: 14px;
   line-height: 18px;
@@ -56,17 +87,3 @@
   background: #000;
   background: rgba(0, 0, 0, 0.6);
 }
-
-.lightbox-header .close {
-  margin-top: -16px;
-  margin-right: -16px;
-  font-size: 2em;
-  color: white;
-  opacity: .8;
-  filter: alpha(opacity=80);
-}
-
-.lightbox-header .close :hover {
-  opacity: .4;
-  filter: alpha(opacity=40);
-}