"HTML Lightbox - lightbox popup free download"
Bootstrap 3.3.0 Snippet by creativealex

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<a href="http://www.iluquotes.com/a-friend-is-one-of-the-nicest-things" target="_blank"><img src="http://www.iluquotes.com/images/post/a-friend-is-one-of-the-nicest-things-friendship-quote.jpg" alt="A friend is one of the nicest things Friendship Quotes"></a>
<div class="container">
<div class="row">
<h2>HTML Lightbox free download</h2>
</div>
</div>
<a href="http://lorempixel.com/600/600/" rel="lytebox[vacation]" title=""><img class="gallery_img_inner" alt="Hangersl" src="http://lorempixel.com/200/200/"></a>
<a href="http://lorempixel.com/600/600/" rel="lytebox[vacation]" title=""><img class="gallery_img_inner" alt="Hangersl" src="http://lorempixel.com/200/240/"></a>
<a href="http://lorempixel.com/600/600/" rel="lytebox[vacation]" title=""><img class="gallery_img_inner" alt="Hangersl" src="http://lorempixel.com/200/230/"></a>
<a href="http://lorempixel.com/600/600/" rel="lytebox[vacation]" title=""><img class="gallery_img_inner" alt="Hangersl" src="http://lorempixel.com/200/200/"></a>
<a href="http://lorempixel.com/600/600/" rel="lytebox[vacation]" title=""><img class="gallery_img_inner" alt="Hangersl" src="http://lorempixel.com/200/270/"></a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
#lbOverlay{background:#000000;}
#lbOverlay.red { background-color: #330000; }
#lbOverlay.green { background-color: #003300; }
#lbOverlay.blue { background-color: #011D50; }
#lbOverlay.gold { background-color: #666600; }
#lbMain { position: fixed;width: 100%; z-index: 99999; text-align: center; line-height: 0; top:2% !important; }
#lbMain a img { border: none; }
#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
#lbOuterContainer.grey { border: 3px solid #888888; }
#lbOuterContainer.red { border: 3px solid #DD0000; }
#lbOuterContainer.green { border: 3px solid #00B000; }
#lbOuterContainer.blue { border: 3px solid #5F89D8; }
#lbOuterContainer.gold { border: 3px solid #B0B000; }
#lbDetailsContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em; overflow: auto; margin: 0 auto; }
#lbDetailsContainer.grey { border: 3px solid #888888; border-top: none; }
#lbDetailsContainer.red { border: 3px solid #DD0000; border-top: none; }
#lbDetailsContainer.green { border: 3px solid #00B000; border-top: none; }
#lbDetailsContainer.blue { border: 3px solid #5F89D8; border-top: none; }
#lbDetailsContainer.gold { border: 3px solid #B0B000; border-top: none; }
#lbImageContainer, #lbIframeContainer { padding: 10px; }
#lbLoading {
position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(gifs/loading.gif) center no-repeat;
}
#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lbImageContainer>#lbHoverNav { left: 0; }
#lbHoverNav a { outline: none; }
#lbPrev { width: 49%; height: 100%; background: transparent url(gifs/blank.gif) no-repeat; display: block; left: 0; float: left; }
#lbPrev:hover{background:url('http://www.mcgowendisplays.com/images/prev_grey.gif') left 15% no-repeat; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//***********************************************************************************************************************************/
// LyteBox v3.22
//
// Author: Markus F. Hay
// Website: http://www.dolem.com/lytebox
// Date: October 2, 2007
// License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
// Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE and Strict/Transitional/Loose DOCTYPES):
// * Firefox: 2.0.0.7, 1.5.0.12
// * Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2
// * Opera: 9.23
//
// Releases: For up-to-date and complete release information, visit http://www.dolem.com/forum/showthread.php?tid=62
// * v3.22 (10/02/07)
// * v3.21 (09/30/07)
// * v3.20 (07/12/07)
// * v3.10 (05/28/07)
// * v3.00 (05/15/07)
// * v2.02 (11/13/06)
//
// Credit: LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more
// information please visit http://huddletogether.com/projects/lightbox2/
//***********************************************************************************************************************************/
Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } }
Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } }
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }
function LyteBox() {
/*** Start Global Configuration ***/
this.theme = 'grey'; // themes: grey (default), red, green, blue, gold
this.hideFlash = true; // controls whether or not Flash objects should be hidden
this.outerBorder = true; // controls whether to show the outer grey (or theme) border
this.resizeSpeed = 8; // controls the speed of the image resizing (1=slowest and 10=fastest)
this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay
this.navType = 1; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number
this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions
this.doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro
animated sinin and signup panel. animated login and registeration page, popup,
Free App Template for Bootstrap 3
Responsive Team Profiles with Social Links Free For Bootstrap

Questions / Comments: