You are here

lightbox_alt.css in Lightbox2 5.2

/**
 * Based on a design created by Nicolas Borda:
 * http://www.ipwa.net/assets/myslimbox/
 */

#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;
  overflow: hidden;
}

#imageContainer, #frameContainer, #modalContainer {
  padding: 10px;
}

#modalContainer {
  line-height: 1em;
  overflow: auto;
}

#loading {
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
  position: absolute;
  top: 40%;
  left: 45%;
  *left: 0%;
}

#hoverNav {
  z-index: 10;
}

#imageData>#hoverNav {
  left: 0;
}

#hoverNav a {
  outline: none;
}

#prevLink, #nextLink {
  width: 45px;
  height: 45px;
  display: block;
}

#prevLink {
  left: 0;
  float: left;
  background: url(../images/prev_alt.gif) left 15% no-repeat;
}

#nextLink {
  right: 0;
  float: right;
  background: url(../images/next_alt.gif) right 15% no-repeat;
}

#prevLink:hover, #prevLink:visited:hover {
  background-position: right 15%;
}

#nextLink:hover, #nextLink:visited:hover {
  background-position: left 15%;
}

#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%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

#imageData #caption {
  font-weight: bold;
}

#imageData #numberDisplay {
  display: block;
  padding-bottom: 1.0em;
}

#imageData #node_link_text {
  display: block;
  padding-bottom: 1.0em;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #000;
}

#overlay_default {
  opacity: 0.6;
}

#overlay_macff2 {
  background: transparent url(../images/overlay.png) repeat;
}


.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;
  z-index: 200;
  background: url(../images/close.gif) left no-repeat;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 26px;
  width: 26px;
}

#bottomNavClose:hover {
  background-position: right;
}

#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: absolute;
  bottom: 25px;
  right: 5px;
}

#bottomNavZoomOut {
  display: block;
  background: url(../images/contract.gif) no-repeat;
  width: 34px;
  height: 34px;
  position: absolute;
  bottom: 25px;
  right: 5px;
}

#lightshowPlay {
  background: url(../images/play.png) no-repeat;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5px;
  height: 20px;
  width: 20px;
}

#lightshowPause {
  background: url(../images/pause.png) no-repeat;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5px;
  height: 20px;
  width: 20px;
}

.lightbox_hide_image {
  display: none;
}

#lightboxImage {
  -ms-interpolation-mode: bicubic;
}

File

css/lightbox_alt.css
View source
  1. /**
  2. * Based on a design created by Nicolas Borda:
  3. * http://www.ipwa.net/assets/myslimbox/
  4. */
  5. #lightbox {
  6. position: absolute;
  7. top: 40px;
  8. left: 0;
  9. width: 100%;
  10. z-index: 100;
  11. text-align: center;
  12. line-height: 0;
  13. }
  14. #lightbox a img {
  15. border: none;
  16. }
  17. #outerImageContainer {
  18. position: relative;
  19. background-color: #fff;
  20. width: 250px;
  21. height: 250px;
  22. margin: 0 auto;
  23. min-width: 240px;
  24. overflow: hidden;
  25. }
  26. #imageContainer, #frameContainer, #modalContainer {
  27. padding: 10px;
  28. }
  29. #modalContainer {
  30. line-height: 1em;
  31. overflow: auto;
  32. }
  33. #loading {
  34. height: 25%;
  35. width: 100%;
  36. text-align: center;
  37. line-height: 0;
  38. position: absolute;
  39. top: 40%;
  40. left: 45%;
  41. *left: 0%;
  42. }
  43. #hoverNav {
  44. z-index: 10;
  45. }
  46. #imageData>#hoverNav {
  47. left: 0;
  48. }
  49. #hoverNav a {
  50. outline: none;
  51. }
  52. #prevLink, #nextLink {
  53. width: 45px;
  54. height: 45px;
  55. display: block;
  56. }
  57. #prevLink {
  58. left: 0;
  59. float: left;
  60. background: url(../images/prev_alt.gif) left 15% no-repeat;
  61. }
  62. #nextLink {
  63. right: 0;
  64. float: right;
  65. background: url(../images/next_alt.gif) right 15% no-repeat;
  66. }
  67. #prevLink:hover, #prevLink:visited:hover {
  68. background-position: right 15%;
  69. }
  70. #nextLink:hover, #nextLink:visited:hover {
  71. background-position: left 15%;
  72. }
  73. #imageDataContainer {
  74. font: 10px Verdana, Helvetica, sans-serif;
  75. background-color: #fff;
  76. margin: 0 auto;
  77. line-height: 1.4em;
  78. min-width: 240px;
  79. }
  80. #imageData {
  81. padding: 0 10px;
  82. }
  83. #imageData #imageDetails {
  84. width: 70%;
  85. margin-right: auto;
  86. margin-left: auto;
  87. text-align: center;
  88. }
  89. #imageData #caption {
  90. font-weight: bold;
  91. }
  92. #imageData #numberDisplay {
  93. display: block;
  94. padding-bottom: 1.0em;
  95. }
  96. #imageData #node_link_text {
  97. display: block;
  98. padding-bottom: 1.0em;
  99. }
  100. #overlay {
  101. position: absolute;
  102. top: 0;
  103. left: 0;
  104. z-index: 90;
  105. width: 100%;
  106. height: 500px;
  107. background-color: #000;
  108. }
  109. #overlay_default {
  110. opacity: 0.6;
  111. }
  112. #overlay_macff2 {
  113. background: transparent url(../images/overlay.png) repeat;
  114. }
  115. .clearfix:after {
  116. content: ".";
  117. display: block;
  118. height: 0;
  119. clear: both;
  120. visibility: hidden;
  121. }
  122. * html>body .clearfix {
  123. display: inline;
  124. width: 100%;
  125. }
  126. * html .clearfix {
  127. /* Hides from IE-mac \*/
  128. height: 1%;
  129. /* End hide from IE-mac */
  130. }
  131. /* Image location mod */
  132. #bottomNavClose {
  133. display: block;
  134. z-index: 200;
  135. background: url(../images/close.gif) left no-repeat;
  136. position: absolute;
  137. top: 0px;
  138. right: 0px;
  139. height: 26px;
  140. width: 26px;
  141. }
  142. #bottomNavClose:hover {
  143. background-position: right;
  144. }
  145. #loadingLink {
  146. display: block;
  147. background: url(../images/loading.gif) no-repeat;
  148. width: 32px;
  149. height: 32px;
  150. }
  151. #bottomNavZoom {
  152. display: block;
  153. background: url(../images/expand.gif) no-repeat;
  154. width: 34px;
  155. height: 34px;
  156. position: absolute;
  157. bottom: 25px;
  158. right: 5px;
  159. }
  160. #bottomNavZoomOut {
  161. display: block;
  162. background: url(../images/contract.gif) no-repeat;
  163. width: 34px;
  164. height: 34px;
  165. position: absolute;
  166. bottom: 25px;
  167. right: 5px;
  168. }
  169. #lightshowPlay {
  170. background: url(../images/play.png) no-repeat;
  171. display: block;
  172. margin-right: auto;
  173. margin-left: auto;
  174. margin-bottom: 5px;
  175. height: 20px;
  176. width: 20px;
  177. }
  178. #lightshowPause {
  179. background: url(../images/pause.png) no-repeat;
  180. display: block;
  181. margin-right: auto;
  182. margin-left: auto;
  183. margin-bottom: 5px;
  184. height: 20px;
  185. width: 20px;
  186. }
  187. .lightbox_hide_image {
  188. display: none;
  189. }
  190. #lightboxImage {
  191. -ms-interpolation-mode: bicubic;
  192. }