bootstrap-lightbox Issue #8
HTML
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js"></script>
<a data-toggle="lightbox" href="#Lightbox" class="thumbnail">
<img src="http://www.google.de/images/srpr/logo3w.png" alt="Click to view the lightbox">
</a>
<div class="lightbox fade" id="demoLightbox" style="display: none;">
<div class='lightbox-content'>
<img src="http://www.google.de/images/srpr/logo3w.png">
</div>
</div>
CSS
/*
/* =========================================================
* bootstrap-lightbox.css v0.1
*
* =========================================================
* Copyright 2012 Jason Butz
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* 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;
display: block;
text-align: center;
line-height: 0;
z-index: 1050;
position: relative;
top: 70px;
}
.lightbox-content {
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;
}
JavaScript
/* =========================================================
* bootstrap-lightbox.js v0.3
*
* HEAVILY based off bootstrap-modal.js v2.1.1
* =========================================================
* Copyright 2012 Jason Butz
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* 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.
* ========================================================= */
!
function($) {
"use strict"; // jshint ;_;
/* LIGHTBOX CLASS DEFINITION
* ====================== */
var Lightbox = function(element, options) {
this.options = options
this.$element = $(element).delegate('[data-dismiss="lightbox"]', 'click.dismiss.lightbox', $.proxy(this.hide, this))
this.options.remote && this.$element.find('.lightbox-body').load(this.options.remote)
//
var that = this;
// Clone the element
that.$clone = that.$element.filter(':first').clone().css({
'position': 'absolute',
'top': -2000,
'display': 'block',
'visibility': 'visible',
'opacity': 100
}).removeClass('fade').appendTo('body');
that.$h = that.$clone.height(); //this.$element.height();
that.$w = that.$clone.width(); //this.$element.width();
that.$clone.remove();
that.$element.css({
"position": "fixed",
"left": ($(window).width() / 2) - (that.$w / 2),
"top": ($(window).height() / 2) - (that.$h / 2)
});
//
}
Lightbox.prototype =...