You are here

lightbox.css in Lightbox2 6

#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 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

#imageContainer>#hoverNav {
  left: 0;
}

#frameHoverNav {
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  position: absolute;
  bottom: 0px;
  height: 45px;
}

#imageData>#frameHoverNav {
  left: 0;
}

#hoverNav a, #frameHoverNav 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, #framePrevLink {
  left: 0;
  float: left;
}

#nextLink, #frameNextLink {
  right: 0;
  float: right;
}

#prevLink:hover, #prevLink:visited:hover, #prevLink.force_show_nav, #framePrevLink {
  background: url(../images/prev.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover, #nextLink.force_show_nav, #frameNextLink {
  background: url(../images/next.gif) right 15% no-repeat;
}

#prevLink:hover.force_show_nav, #prevLink:visited:hover.force_show_nav,
#framePrevLink:hover, #framePrevLink:visited:hover {
  background: url(../images/prev_hover.gif) left 15% no-repeat;
}

#nextLink:hover.force_show_nav, #nextLink:visited:hover.force_show_nav,
#frameNextLink:hover, #frameNextLink:visited:hover {
  background: url(../images/next_hover.gif) right 15% no-repeat;
}

#framePrevLink, #frameNextLink {
  width: 45px;
  height: 45px;
  display: block;
  position: absolute;
  bottom: 0px;
}

#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 #lightbox2-node-link-text {
  display: block;
  padding-bottom: 1.0em;
}

#imageData #bottomNav {
  height: 66px;
}
.lightbox2-alt-layout #imageData #bottomNav,
.lightbox2-alt-layout-data #bottomNav {
  margin-bottom: 60px;
}

#lightbox2-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;
  background: url(../images/close.gif) left no-repeat;
  margin-top: 33px;
  float: right;
  padding-top: 0.7em;
  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: none;
  background: url(../images/expand.gif) no-repeat;
  width: 34px;
  height: 34px;
  position: relative;
  left: 30px;
  float: right;
}

#bottomNavZoomOut {
  display: none;
  background: url(../images/contract.gif) no-repeat;
  width: 34px;
  height: 34px;
  position: relative;
  left: 30px;
  float: right;
}

#lightshowPlay {
  margin-top: 42px;
  float: right;
  margin-right: 5px;
  margin-bottom: 1px;
  height: 20px;
  width: 20px;
  background: url(../images/play.png) no-repeat;
}

#lightshowPause {
  margin-top: 42px;
  float: right;
  margin-right: 5px;
  margin-bottom: 1px;
  height: 20px;
  width: 20px;
  background: url(../images/pause.png) no-repeat;
}

.lightbox2-alt-layout-data #bottomNavClose,
.lightbox2-alt-layout #bottomNavClose {
  margin-top: 93px;
}
.lightbox2-alt-layout-data #bottomNavZoom,
.lightbox2-alt-layout-data #bottomNavZoomOut,
.lightbox2-alt-layout #bottomNavZoom,
.lightbox2-alt-layout #bottomNavZoomOut {
  margin-top: 93px;
}
.lightbox2-alt-layout-data #lightshowPlay,
.lightbox2-alt-layout-data #lightshowPause,
.lightbox2-alt-layout #lightshowPlay,
.lightbox2-alt-layout #lightshowPause {
  margin-top: 102px;
}

.lightbox_hide_image {
  display: none;
}

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

File

css/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. overflow: hidden;
  21. }
  22. #imageContainer, #frameContainer, #modalContainer {
  23. padding: 10px;
  24. }
  25. #modalContainer {
  26. line-height: 1em;
  27. overflow: auto;
  28. }
  29. #loading {
  30. height: 25%;
  31. width: 100%;
  32. text-align: center;
  33. line-height: 0;
  34. position: absolute;
  35. top: 40%;
  36. left: 45%;
  37. *left: 0%;
  38. }
  39. #hoverNav {
  40. position: absolute;
  41. top: 0;
  42. left: 0;
  43. height: 100%;
  44. width: 100%;
  45. z-index: 10;
  46. }
  47. #imageContainer>#hoverNav {
  48. left: 0;
  49. }
  50. #frameHoverNav {
  51. z-index: 10;
  52. margin-left: auto;
  53. margin-right: auto;
  54. width: 20%;
  55. position: absolute;
  56. bottom: 0px;
  57. height: 45px;
  58. }
  59. #imageData>#frameHoverNav {
  60. left: 0;
  61. }
  62. #hoverNav a, #frameHoverNav a {
  63. outline: none;
  64. }
  65. #prevLink, #nextLink {
  66. width: 49%;
  67. height: 100%;
  68. background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
  69. display: block;
  70. }
  71. #prevLink, #framePrevLink {
  72. left: 0;
  73. float: left;
  74. }
  75. #nextLink, #frameNextLink {
  76. right: 0;
  77. float: right;
  78. }
  79. #prevLink:hover, #prevLink:visited:hover, #prevLink.force_show_nav, #framePrevLink {
  80. background: url(../images/prev.gif) left 15% no-repeat;
  81. }
  82. #nextLink:hover, #nextLink:visited:hover, #nextLink.force_show_nav, #frameNextLink {
  83. background: url(../images/next.gif) right 15% no-repeat;
  84. }
  85. #prevLink:hover.force_show_nav, #prevLink:visited:hover.force_show_nav,
  86. #framePrevLink:hover, #framePrevLink:visited:hover {
  87. background: url(../images/prev_hover.gif) left 15% no-repeat;
  88. }
  89. #nextLink:hover.force_show_nav, #nextLink:visited:hover.force_show_nav,
  90. #frameNextLink:hover, #frameNextLink:visited:hover {
  91. background: url(../images/next_hover.gif) right 15% no-repeat;
  92. }
  93. #framePrevLink, #frameNextLink {
  94. width: 45px;
  95. height: 45px;
  96. display: block;
  97. position: absolute;
  98. bottom: 0px;
  99. }
  100. #imageDataContainer {
  101. font: 10px Verdana, Helvetica, sans-serif;
  102. background-color: #fff;
  103. margin: 0 auto;
  104. line-height: 1.4em;
  105. min-width: 240px;
  106. }
  107. #imageData {
  108. padding: 0 10px;
  109. }
  110. #imageData #imageDetails {
  111. width: 70%;
  112. float: left;
  113. text-align: left;
  114. }
  115. #imageData #caption {
  116. font-weight: bold;
  117. }
  118. #imageData #numberDisplay {
  119. display: block;
  120. clear: left;
  121. padding-bottom: 1.0em;
  122. }
  123. #imageData #lightbox2-node-link-text {
  124. display: block;
  125. padding-bottom: 1.0em;
  126. }
  127. #imageData #bottomNav {
  128. height: 66px;
  129. }
  130. .lightbox2-alt-layout #imageData #bottomNav,
  131. .lightbox2-alt-layout-data #bottomNav {
  132. margin-bottom: 60px;
  133. }
  134. #lightbox2-overlay {
  135. position: absolute;
  136. top: 0;
  137. left: 0;
  138. z-index: 90;
  139. width: 100%;
  140. height: 500px;
  141. background-color: #000;
  142. }
  143. #overlay_default {
  144. opacity: 0.6;
  145. }
  146. #overlay_macff2 {
  147. background: transparent url(../images/overlay.png) repeat;
  148. }
  149. .clearfix:after {
  150. content: ".";
  151. display: block;
  152. height: 0;
  153. clear: both;
  154. visibility: hidden;
  155. }
  156. * html>body .clearfix {
  157. display: inline;
  158. width: 100%;
  159. }
  160. * html .clearfix {
  161. /* Hides from IE-mac \*/
  162. height: 1%;
  163. /* End hide from IE-mac */
  164. }
  165. /* Image location mod */
  166. #bottomNavClose {
  167. display: block;
  168. background: url(../images/close.gif) left no-repeat;
  169. margin-top: 33px;
  170. float: right;
  171. padding-top: 0.7em;
  172. height: 26px;
  173. width: 26px;
  174. }
  175. #bottomNavClose:hover {
  176. background-position: right;
  177. }
  178. #loadingLink {
  179. display: block;
  180. background: url(../images/loading.gif) no-repeat;
  181. width: 32px;
  182. height: 32px;
  183. }
  184. #bottomNavZoom {
  185. display: none;
  186. background: url(../images/expand.gif) no-repeat;
  187. width: 34px;
  188. height: 34px;
  189. position: relative;
  190. left: 30px;
  191. float: right;
  192. }
  193. #bottomNavZoomOut {
  194. display: none;
  195. background: url(../images/contract.gif) no-repeat;
  196. width: 34px;
  197. height: 34px;
  198. position: relative;
  199. left: 30px;
  200. float: right;
  201. }
  202. #lightshowPlay {
  203. margin-top: 42px;
  204. float: right;
  205. margin-right: 5px;
  206. margin-bottom: 1px;
  207. height: 20px;
  208. width: 20px;
  209. background: url(../images/play.png) no-repeat;
  210. }
  211. #lightshowPause {
  212. margin-top: 42px;
  213. float: right;
  214. margin-right: 5px;
  215. margin-bottom: 1px;
  216. height: 20px;
  217. width: 20px;
  218. background: url(../images/pause.png) no-repeat;
  219. }
  220. .lightbox2-alt-layout-data #bottomNavClose,
  221. .lightbox2-alt-layout #bottomNavClose {
  222. margin-top: 93px;
  223. }
  224. .lightbox2-alt-layout-data #bottomNavZoom,
  225. .lightbox2-alt-layout-data #bottomNavZoomOut,
  226. .lightbox2-alt-layout #bottomNavZoom,
  227. .lightbox2-alt-layout #bottomNavZoomOut {
  228. margin-top: 93px;
  229. }
  230. .lightbox2-alt-layout-data #lightshowPlay,
  231. .lightbox2-alt-layout-data #lightshowPause,
  232. .lightbox2-alt-layout #lightshowPlay,
  233. .lightbox2-alt-layout #lightshowPause {
  234. margin-top: 102px;
  235. }
  236. .lightbox_hide_image {
  237. display: none;
  238. }
  239. #lightboxImage {
  240. -ms-interpolation-mode: bicubic;
  241. }