You are here

Home » API reference » Lightbox2 5

lightbox.css in Lightbox2 5 

#lightbox {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  line-height: 0;
}
#lightbox a img {
  border: none;
}
#outerImageContainer {
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  min-width: 240px;
}
#imageContainer {
  padding: 10px;
}
#loading {
  position: absolute;
  top: 40%;
  left: 45%;
  *left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
#hoverNav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
#imageContainer>#hoverNav {
  left: 0;
}
#hoverNav a {
  outline: none;
}
#prevLink, #nextLink {
  width: 49%;
  height: 100%;
  background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
  display: block;
}
#prevLink {
  left: 0;
  float: left;
}
#nextLink {
  right: 0;
  float: right;
}
#prevLink:hover, #prevLink:visited:hover {
  background: url(images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
  background: url(images/nextlabel.gif) right 15% no-repeat;
}
#imageDataContainer {
  font: 10px Verdana, Helvetica, sans-serif;
  background-color: #fff;
  margin: 0 auto;
  line-height: 1.4em;
  min-width: 240px;
}
#imageData {
  padding: 0 10px;
}
#imageData #imageDetails {
  width: 70%;
  float: left;
  text-align: left;
}
#imageData #caption {
  font-weight: bold;
}
#imageData #numberDisplay {
  display: block;
  clear: left;
  padding-bottom: 1.0em;
}
#imageData #bottomNavClose {
  width: 66px;
  float: right;
  padding-top: 0.7em;
}
#imageData #bottomNav {
  height: 57px;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #000;
  filter:alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html>body .clearfix {
  display: inline;
  width: 100%;
}
* html .clearfix {
  /* Hides from IE-mac \*/
  height: 1%;
  /* End hide from IE-mac */
}

/* Image location mod */
#bottomNavClose {
  display: block;
  background: url(images/closelabel.gif) no-repeat;
  width: 66px;
  height: 22px;
  position: relative;
  top: 35px;
}
#loadingLink {
  display: block;
  background: url(images/loading.gif) no-repeat;
  width: 32px;
  height: 32px;
}
#bottomNavZoom {
  display: block;
  background: url(images/expand.gif) no-repeat;
  width: 34px;
  height: 34px;
  position: relative;
  float: right;
  left: 66px;
}

File

lightbox.css
View source 
  1. #lightbox {

  2.   position: absolute;

  3.   top: 40px;

  4.   left: 0;

  5.   width: 100%;

  6.   z-index: 100;

  7.   text-align: center;

  8.   line-height: 0;

  9. }

  10. #lightbox a img {

  11.   border: none;

  12. }

  13. #outerImageContainer {

  14.   position: relative;

  15.   background-color: #fff;

  16.   width: 250px;

  17.   height: 250px;

  18.   margin: 0 auto;

  19.   min-width: 240px;

  20. }

  21. #imageContainer {

  22.   padding: 10px;

  23. }

  24. #loading {

  25.   position: absolute;

  26.   top: 40%;

  27.   left: 45%;

  28.   *left: 0%;

  29.   height: 25%;

  30.   width: 100%;

  31.   text-align: center;

  32.   line-height: 0;

  33. }

  34. #hoverNav {

  35.   position: absolute;

  36.   top: 0;

  37.   left: 0;

  38.   height: 100%;

  39.   width: 100%;

  40.   z-index: 10;

  41. }

  42. #imageContainer>#hoverNav {

  43.   left: 0;

  44. }

  45. #hoverNav a {

  46.   outline: none;

  47. }

  48. #prevLink, #nextLink {

  49.   width: 49%;

  50.   height: 100%;

  51.   background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */

  52.   display: block;

  53. }

  54. #prevLink {

  55.   left: 0;

  56.   float: left;

  57. }

  58. #nextLink {

  59.   right: 0;

  60.   float: right;

  61. }

  62. #prevLink:hover, #prevLink:visited:hover {

  63.   background: url(images/prevlabel.gif) left 15% no-repeat;

  64. }

  65. #nextLink:hover, #nextLink:visited:hover {

  66.   background: url(images/nextlabel.gif) right 15% no-repeat;

  67. }

  68. #imageDataContainer {

  69.   font: 10px Verdana, Helvetica, sans-serif;

  70.   background-color: #fff;

  71.   margin: 0 auto;

  72.   line-height: 1.4em;

  73.   min-width: 240px;

  74. }

  75. #imageData {

  76.   padding: 0 10px;

  77. }

  78. #imageData #imageDetails {

  79.   width: 70%;

  80.   float: left;

  81.   text-align: left;

  82. }

  83. #imageData #caption {

  84.   font-weight: bold;

  85. }

  86. #imageData #numberDisplay {

  87.   display: block;

  88.   clear: left;

  89.   padding-bottom: 1.0em;

  90. }

  91. #imageData #bottomNavClose {

  92.   width: 66px;

  93.   float: right;

  94.   padding-top: 0.7em;

  95. }

  96. #imageData #bottomNav {

  97.   height: 57px;

  98. }

  99. #overlay {

  100.   position: absolute;

  101.   top: 0;

  102.   left: 0;

  103.   z-index: 90;

  104.   width: 100%;

  105.   height: 500px;

  106.   background-color: #000;

  107.   filter:alpha(opacity=60);

  108.   -moz-opacity: 0.6;

  109.   opacity: 0.6;

  110. }

  111. .clearfix:after {

  112.   content: ".";

  113.   display: block;

  114.   height: 0;

  115.   clear: both;

  116.   visibility: hidden;

  117. }

  118. * html>body .clearfix {

  119.   display: inline;

  120.   width: 100%;

  121. }

  122. * html .clearfix {

  123.   /* Hides from IE-mac \*/

  124.   height: 1%;

  125.   /* End hide from IE-mac */

  126. }

  127. 

  128. /* Image location mod */

  129. #bottomNavClose {

  130.   display: block;

  131.   background: url(images/closelabel.gif) no-repeat;

  132.   width: 66px;

  133.   height: 22px;

  134.   position: relative;

  135.   top: 35px;

  136. }

  137. #loadingLink {

  138.   display: block;

  139.   background: url(images/loading.gif) no-repeat;

  140.   width: 32px;

  141.   height: 32px;

  142. }

  143. #bottomNavZoom {

  144.   display: block;

  145.   background: url(images/expand.gif) no-repeat;

  146.   width: 34px;

  147.   height: 34px;

  148.   position: relative;

  149.   float: right;

  150.   left: 66px;

  151. }