Permalink
Browse files

* Adding caption feature from Issue #21

* Adding example of carousel to the docs page
  • Loading branch information...
Jason Butz
Jason Butz committed Jan 14, 2013
1 parent 4a55018 commit 8f7b3f830981a24054571df66821831011bb4f4c
@@ -1,9 +1,9 @@
/*!=========================================================
-* bootstrap-lightbox v0.4.1 - 11/29/2012
+* bootstrap-lightbox v0.4.1 - 1/14/2013
* http://jbutz.github.com/bootstrap-lightbox/
* HEAVILY based off bootstrap-modal.js
* ==========================================================
-* Copyright (c) 2012 Jason Butz (http://jasonbutz.info)
+* Copyright (c) 2013 Jason Butz (http://jasonbutz.info)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -51,6 +51,21 @@
-moz-background-clip: padding-box;
background-clip: padding-box;
}
+.lightbox-content .lightbox-caption {
+ padding: 2%;
+ position: absolute;
+ left: 11px;
+ right: 12px;
+ bottom: 11px;
+ background: #000;
+ background: rgba(0, 0, 0, 0.6);
+ color: white;
+ text-align: center;
+ text-shadow: 0 -1px 0 #000000;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+ font-size: 14px;
+ line-height: 18px;
+}
.lightbox-header .close {
color: white;
margin-right: -16px;
@@ -1,9 +1,9 @@
/*!=========================================================
-* bootstrap-lightbox v0.4.1 - 11/29/2012
+* bootstrap-lightbox v0.4.1 - 1/14/2013
* http://jbutz.github.com/bootstrap-lightbox/
* HEAVILY based off bootstrap-modal.js
* ==========================================================
-* Copyright (c) 2012 Jason Butz (http://jasonbutz.info)
+* Copyright (c) 2013 Jason Butz (http://jasonbutz.info)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -1,9 +1,9 @@
/*!=========================================================
-* bootstrap-lightbox v0.4.1 - 11/29/2012
+* bootstrap-lightbox v0.4.1 - 1/14/2013
* http://jbutz.github.com/bootstrap-lightbox/
* HEAVILY based off bootstrap-modal.js
* ==========================================================
-* Copyright (c) 2012 Jason Butz (http://jasonbutz.info)
+* Copyright (c) 2013 Jason Butz (http://jasonbutz.info)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -16,4 +16,4 @@
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-* ========================================================= */.lightbox{background-color:transparent;text-align:center;line-height:0;z-index:1050;position:relative;top:70px;outline:0}.lightbox .hide{display:none}.lightbox .in{display:block}.lightbox-content{display:inline-block;padding:10px;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.3);*border:1px solid #999;-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}.lightbox-header .close{color:white;margin-right:-16px;margin-top:-16px;font-size:2em;opacity:.8;filter:alpha(opacity=80)}.lightbox-header .close :hover{opacity:.4;filter:alpha(opacity=40)}
+* ========================================================= */.lightbox{background-color:transparent;text-align:center;line-height:0;z-index:1050;position:relative;top:70px;outline:0}.lightbox .hide{display:none}.lightbox .in{display:block}.lightbox-content{display:inline-block;padding:10px;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.3);*border:1px solid #999;-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}.lightbox-content .lightbox-caption{padding:2%;position:absolute;left:11px;right:12px;bottom:11px;background:#000;background:rgba(0,0,0,0.6);color:white;text-align:center;text-shadow:0 -1px 0 #000;text-shadow:0 -1px 0 rgba(0,0,0,0.3);font-size:14px;line-height:18px}.lightbox-header .close{color:white;margin-right:-16px;margin-top:-16px;font-size:2em;opacity:.8;filter:alpha(opacity=80)}.lightbox-header .close :hover{opacity:.4;filter:alpha(opacity=40)}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -1,9 +1,9 @@
/*!=========================================================
-* bootstrap-lightbox v0.4.1 - 11/29/2012
+* bootstrap-lightbox v0.4.1 - 1/14/2013
* http://jbutz.github.com/bootstrap-lightbox/
* HEAVILY based off bootstrap-modal.js
* ==========================================================
-* Copyright (c) 2012 Jason Butz (http://jasonbutz.info)
+* Copyright (c) 2013 Jason Butz (http://jasonbutz.info)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -16,4 +16,4 @@
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-* ========================================================= */.lightbox{background-color:transparent;text-align:center;line-height:0;z-index:1050;position:relative;top:70px;outline:0}.lightbox .hide{display:none}.lightbox .in{display:block}.lightbox-content{display:inline-block;padding:10px;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.3);*border:1px solid #999;-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}.lightbox-header .close{color:white;margin-right:-16px;margin-top:-16px;font-size:2em;opacity:.8;filter:alpha(opacity=80)}.lightbox-header .close :hover{opacity:.4;filter:alpha(opacity=40)}
+* ========================================================= */.lightbox{background-color:transparent;text-align:center;line-height:0;z-index:1050;position:relative;top:70px;outline:0}.lightbox .hide{display:none}.lightbox .in{display:block}.lightbox-content{display:inline-block;padding:10px;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.3);*border:1px solid #999;-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}.lightbox-content .lightbox-caption{padding:2%;position:absolute;left:11px;right:12px;bottom:11px;background:#000;background:rgba(0,0,0,0.6);color:white;text-align:center;text-shadow:0 -1px 0 #000;text-shadow:0 -1px 0 rgba(0,0,0,0.3);font-size:14px;line-height:18px}.lightbox-header .close{color:white;margin-right:-16px;margin-top:-16px;font-size:2em;opacity:.8;filter:alpha(opacity=80)}.lightbox-header .close :hover{opacity:.4;filter:alpha(opacity=40)}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -77,6 +77,7 @@ <h1>Demo <small>See it in action!</small></h1>
</div>
<div class='lightbox-content'>
<img src="assets/img/large.png">
+ <div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
</div>
@@ -149,7 +150,29 @@ <h3>Options</h3>
<div class="page-header">
<h1>Bonus!</h1>
</div>
- <p>You can make use of the Twitter Bootstrap Carousel plugin inside the lightbox!</p>
+ <p>You can make use of the Twitter Bootstrap Carousel plugin <a data-toggle="lightbox" href="#demoLightboxCarousel">inside the lightbox!</a></p>
+ <div id="demoLightboxCarousel" 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="http://jbutz.github.com/bootstrap-lightbox/assets/img/large.png"> -->
+ <div id="myCarousel" class="carousel slide">
+ <!-- Carousel items -->
+ <div class="carousel-inner">
+ <div class="active item"><img src="http://jbutz.github.com/bootstrap-lightbox/assets/img/large.png"></div>
+ <div class="item"><img src="http://jbutz.github.com/bootstrap-lightbox/assets/img/large.png"></div>
+ <div class="item"><img src="http://jbutz.github.com/bootstrap-lightbox/assets/img/large.png"></div>
+ </div>
+ <!-- Carousel nav -->
+ <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+ <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+ </div>
+ </div>
+ </div>
+ <script>
+ $('.carousel').carousel();
+ </script>
</div> </section>
<section style="margin-top: 50px; margin-bottom: 50px; height: 10px;">
<!-- Take up space -->
@@ -2,5 +2,27 @@
<div class="page-header">
<h1>Bonus!</h1>
</div>
- <p>You can make use of the Twitter Bootstrap Carousel plugin inside the lightbox!</p>
+ <p>You can make use of the Twitter Bootstrap Carousel plugin <a data-toggle="lightbox" href="#demoLightboxCarousel">inside the lightbox!</a></p>
+ <div id="demoLightboxCarousel" 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="http://jbutz.github.com/bootstrap-lightbox/assets/img/large.png"> -->
+ <div id="myCarousel" class="carousel slide">
+ <!-- Carousel items -->
+ <div class="carousel-inner">
+ <div class="active item"><img src="http://jbutz.github.com/bootstrap-lightbox/assets/img/large.png"></div>
+ <div class="item"><img src="http://jbutz.github.com/bootstrap-lightbox/assets/img/large.png"></div>
+ <div class="item"><img src="http://jbutz.github.com/bootstrap-lightbox/assets/img/large.png"></div>
+ </div>
+ <!-- Carousel nav -->
+ <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+ <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+ </div>
+ </div>
+ </div>
+ <script>
+ $('.carousel').carousel();
+ </script>
</div>
@@ -19,6 +19,7 @@
</div>
<div class='lightbox-content'>
<img src="assets/img/large.png">
+ <div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
</div>
@@ -36,6 +36,22 @@
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
+
+ .lightbox-caption {
+ padding: 2%;
+ position: absolute;
+ left: 11px;
+ right: 12px;
+ bottom: 11px;
+ background: #000;
+ background: rgba(0, 0, 0, 0.6);
+ color: white;
+ text-align: center;
+ text-shadow: 0 -1px 0 #000;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+ font-size: 14px;
+ line-height: 18px;
+ }
}
.lightbox-header {
.close {

0 comments on commit 8f7b3f8

Please sign in to comment.