The original lightbox script, finally on github. http://lokeshdhakar.com/projects/lightbox2/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

332 lines
9.7KB

  1. ###
  2. Lightbox v2.51
  3. by Lokesh Dhakar - http://www.lokeshdhakar.com
  4. For more information, visit:
  5. http://lokeshdhakar.com/projects/lightbox2/
  6. Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  7. - free for use in both personal and commercial projects
  8. - attribution requires leaving author name, author link, and the license info intact
  9. Thanks
  10. - Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
  11. - Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.
  12. Table of Contents
  13. =================
  14. LightboxOptions
  15. Lightbox
  16. - constructor
  17. - init
  18. - enable
  19. - build
  20. - start
  21. - changeImage
  22. - sizeContainer
  23. - showImage
  24. - updateNav
  25. - updateDetails
  26. - preloadNeigbhoringImages
  27. - enableKeyboardNav
  28. - disableKeyboardNav
  29. - keyboardAction
  30. - end
  31. options = new LightboxOptions
  32. lightbox = new Lightbox options
  33. ###
  34. # Use local alias
  35. $ = jQuery
  36. class LightboxOptions
  37. constructor: ->
  38. @fileLoadingImage = 'images/loading.gif'
  39. @fileCloseImage = 'images/close.png'
  40. @resizeDuration = 700
  41. @fadeDuration = 500
  42. @labelImage = "Image" # Change to localize to non-english language
  43. @labelOf = "of"
  44. class Lightbox
  45. constructor: (@options) ->
  46. @album = []
  47. @currentImageIndex = undefined
  48. @init()
  49. init: ->
  50. @enable()
  51. @build()
  52. # Loop through anchors and areamaps looking for rel attributes that contain 'lightbox'
  53. # On clicking these, start lightbox.
  54. enable: ->
  55. $('body').on 'click', 'a[rel^=lightbox], area[rel^=lightbox]', (e) =>
  56. @start $(e.currentTarget)
  57. false
  58. # Build html for the lightbox and the overlay.
  59. # Attach event handlers to the new DOM elements. click click click
  60. build: ->
  61. $("<div id='lightboxOverlay'></div><div id='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' ><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'><img src='" + @options.fileLoadingImage + "'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'><img src='" + @options.fileCloseImage + "'></a></div></div></div></div>").appendTo($('body'));
  62. # Attach event handlers to the newly minted DOM elements
  63. $('#lightboxOverlay')
  64. .hide()
  65. .on 'click', (e) =>
  66. @end()
  67. return false
  68. $lightbox = $('#lightbox')
  69. $lightbox
  70. .hide()
  71. .on 'click', (e) =>
  72. if $(e.target).attr('id') == 'lightbox' then @end()
  73. return false
  74. $lightbox.find('.lb-outerContainer').on 'click', (e) =>
  75. if $(e.target).attr('id') == 'lightbox' then @end()
  76. return false
  77. $lightbox.find('.lb-prev').on 'click', (e) =>
  78. @changeImage @currentImageIndex - 1
  79. return false
  80. $lightbox.find('.lb-next').on 'click', (e) =>
  81. @changeImage @currentImageIndex + 1
  82. return false
  83. $lightbox.find('.lb-loader, .lb-close').on 'click', (e) =>
  84. @end()
  85. return false
  86. return
  87. # Show overlay and lightbox. If the image is part of a set, add siblings to album array.
  88. start: ($link) ->
  89. $(window).on "resize", @sizeOverlay
  90. $('select, object, embed').css visibility: "hidden"
  91. $('#lightboxOverlay')
  92. .width( $(document).width())
  93. .height( $(document).height() )
  94. .fadeIn( @options.fadeDuration )
  95. @album = []
  96. imageNumber = 0
  97. if $link.attr('rel') == 'lightbox'
  98. # If image is not part of a set
  99. @album.push link: $link.attr('href'), title: $link.attr('title')
  100. else
  101. # Image is part of a set
  102. for a, i in $( $link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]')
  103. @album.push link: $(a).attr('href'), title: $(a).attr('title')
  104. if $(a).attr('href') == $link.attr('href')
  105. imageNumber = i
  106. # Position lightbox
  107. $window = $(window)
  108. top = $window.scrollTop() + $window.height()/10
  109. left = $window.scrollLeft()
  110. $lightbox = $('#lightbox')
  111. $lightbox
  112. .css
  113. top: top + 'px'
  114. left: left + 'px'
  115. .fadeIn( @options.fadeDuration)
  116. @changeImage(imageNumber)
  117. return
  118. # Hide most UI elements in preparation for the animated resizing of the lightbox.
  119. changeImage: (imageNumber) ->
  120. @disableKeyboardNav()
  121. $lightbox = $('#lightbox')
  122. $image = $lightbox.find('.lb-image')
  123. @sizeOverlay()
  124. $('#lightboxOverlay').fadeIn( @options.fadeDuration )
  125. $('.loader').fadeIn 'slow'
  126. $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide()
  127. $lightbox.find('.lb-outerContainer').addClass 'animating'
  128. # When image to show is preloaded, we send the width and height to sizeContainer()
  129. preloader = new Image
  130. preloader.onload = () =>
  131. $image.attr 'src', @album[imageNumber].link
  132. # Bug fix by Andy Scott
  133. $image.width = preloader.width
  134. $image.height = preloader.height
  135. # End of bug fix
  136. @sizeContainer preloader.width, preloader.height
  137. preloader.src = @album[imageNumber].link
  138. @currentImageIndex = imageNumber
  139. return
  140. # Stretch overlay to fit the document
  141. sizeOverlay: () ->
  142. $('#lightboxOverlay')
  143. .width( $(document).width())
  144. .height( $(document).height() )
  145. # Animate the size of the lightbox to fit the image we are showing
  146. sizeContainer: (imageWidth, imageHeight) ->
  147. $lightbox = $('#lightbox')
  148. $outerContainer = $lightbox.find('.lb-outerContainer')
  149. oldWidth = $outerContainer.outerWidth()
  150. oldHeight = $outerContainer.outerHeight()
  151. $container = $lightbox.find('.lb-container')
  152. containerTopPadding = parseInt $container.css('padding-top'), 10
  153. containerRightPadding = parseInt $container.css('padding-right'), 10
  154. containerBottomPadding = parseInt $container.css('padding-bottom'), 10
  155. containerLeftPadding = parseInt $container.css('padding-left'), 10
  156. newWidth = imageWidth + containerLeftPadding + containerRightPadding
  157. newHeight = imageHeight + containerTopPadding + containerBottomPadding
  158. # Animate just the width, just the height, or both, depending on what is different
  159. if newWidth != oldWidth && newHeight != oldHeight
  160. $outerContainer.animate
  161. width: newWidth,
  162. height: newHeight
  163. , @options.resizeDuration, 'swing'
  164. else if newWidth != oldWidth
  165. $outerContainer.animate
  166. width: newWidth
  167. , @options.resizeDuration, 'swing'
  168. else if newHeight != oldHeight
  169. $outerContainer.animate
  170. height: newHeight
  171. , @options.resizeDuration, 'swing'
  172. # Wait for resize animation to finsh before showing the image
  173. setTimeout =>
  174. $lightbox.find('.lb-dataContainer').width(newWidth)
  175. $lightbox.find('.lb-prevLink').height(newHeight)
  176. $lightbox.find('.lb-nextLink').height(newHeight)
  177. @showImage()
  178. return
  179. , @options.resizeDuration
  180. return
  181. # Display the image and it's details and begin preload neighboring images.
  182. showImage: ->
  183. $lightbox = $('#lightbox')
  184. $lightbox.find('.lb-loader').hide()
  185. $lightbox.find('.lb-image').fadeIn 'slow'
  186. @updateNav()
  187. @updateDetails()
  188. @preloadNeighboringImages()
  189. @enableKeyboardNav()
  190. return
  191. # Display previous and next navigation if appropriate.
  192. updateNav: ->
  193. $lightbox = $('#lightbox')
  194. $lightbox.find('.lb-nav').show()
  195. if @currentImageIndex > 0 then $lightbox.find('.lb-prev').show();
  196. if @currentImageIndex < @album.length - 1 then $lightbox.find('.lb-next').show();
  197. return
  198. # Display caption, image number, and closing button.
  199. updateDetails: ->
  200. $lightbox = $('#lightbox')
  201. if typeof @album[@currentImageIndex].title != 'undefined' && @album[@currentImageIndex].title != ""
  202. $lightbox.find('.lb-caption')
  203. .html( @album[@currentImageIndex].title)
  204. .fadeIn('fast')
  205. if @album.length > 1
  206. $lightbox.find('.lb-number')
  207. .html( @options.labelImage + ' ' + (@currentImageIndex + 1) + ' ' + @options.labelOf + ' ' + @album.length)
  208. .fadeIn('fast')
  209. else
  210. $lightbox.find('.lb-number').hide()
  211. $lightbox.find('.lb-outerContainer').removeClass 'animating'
  212. $lightbox.find('.lb-dataContainer')
  213. .fadeIn @resizeDuration, () =>
  214. @sizeOverlay()
  215. return
  216. # Preload previos and next images in set.
  217. preloadNeighboringImages: ->
  218. if @album.length > @currentImageIndex + 1
  219. preloadNext = new Image
  220. preloadNext.src = @album[@currentImageIndex + 1].link
  221. if @currentImageIndex > 0
  222. preloadPrev = new Image
  223. preloadPrev.src = @album[@currentImageIndex - 1].link
  224. return
  225. enableKeyboardNav: ->
  226. $(document).on 'keyup.keyboard', $.proxy( @keyboardAction, this)
  227. return
  228. disableKeyboardNav: ->
  229. $(document).off '.keyboard'
  230. return
  231. keyboardAction: (event) ->
  232. KEYCODE_ESC = 27
  233. KEYCODE_LEFTARROW = 37
  234. KEYCODE_RIGHTARROW = 39
  235. keycode = event.keyCode
  236. key = String.fromCharCode(keycode).toLowerCase()
  237. if keycode == KEYCODE_ESC || key.match(/x|o|c/)
  238. @end()
  239. else if key == 'p' || keycode == KEYCODE_LEFTARROW
  240. if @currentImageIndex != 0
  241. @changeImage @currentImageIndex - 1
  242. else if key == 'n' || keycode == KEYCODE_RIGHTARROW
  243. if @currentImageIndex != @album.length - 1
  244. @changeImage @currentImageIndex + 1
  245. return
  246. # Closing time. :-(
  247. end: ->
  248. @disableKeyboardNav()
  249. $(window).off "resize", @sizeOverlay
  250. $('#lightbox').fadeOut @options.fadeDuration
  251. $('#lightboxOverlay').fadeOut @options.fadeDuration
  252. $('select, object, embed').css visibility: "visible"
  253. $ ->
  254. options = new LightboxOptions
  255. lightbox = new Lightbox options