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.
331 lines
9.7 KiB
331 lines
9.7 KiB
###
|
|
Lightbox v2.51
|
|
by Lokesh Dhakar - http://www.lokeshdhakar.com
|
|
|
|
For more information, visit:
|
|
http://lokeshdhakar.com/projects/lightbox2/
|
|
|
|
Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
|
|
- free for use in both personal and commercial projects
|
|
- attribution requires leaving author name, author link, and the license info intact
|
|
|
|
Thanks
|
|
- Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
|
|
- Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.
|
|
|
|
|
|
Table of Contents
|
|
=================
|
|
LightboxOptions
|
|
|
|
Lightbox
|
|
- constructor
|
|
- init
|
|
- enable
|
|
- build
|
|
- start
|
|
- changeImage
|
|
- sizeContainer
|
|
- showImage
|
|
- updateNav
|
|
- updateDetails
|
|
- preloadNeigbhoringImages
|
|
- enableKeyboardNav
|
|
- disableKeyboardNav
|
|
- keyboardAction
|
|
- end
|
|
|
|
options = new LightboxOptions
|
|
lightbox = new Lightbox options
|
|
|
|
###
|
|
|
|
# Use local alias
|
|
$ = jQuery
|
|
|
|
class LightboxOptions
|
|
constructor: ->
|
|
@fileLoadingImage = 'images/loading.gif'
|
|
@fileCloseImage = 'images/close.png'
|
|
@resizeDuration = 700
|
|
@fadeDuration = 500
|
|
@labelImage = "Image" # Change to localize to non-english language
|
|
@labelOf = "of"
|
|
|
|
|
|
class Lightbox
|
|
constructor: (@options) ->
|
|
@album = []
|
|
@currentImageIndex = undefined
|
|
@init()
|
|
|
|
|
|
init: ->
|
|
@enable()
|
|
@build()
|
|
|
|
|
|
# Loop through anchors and areamaps looking for rel attributes that contain 'lightbox'
|
|
# On clicking these, start lightbox.
|
|
enable: ->
|
|
$('body').on 'click', 'a[rel^=lightbox], area[rel^=lightbox]', (e) =>
|
|
@start $(e.currentTarget)
|
|
false
|
|
|
|
|
|
# Build html for the lightbox and the overlay.
|
|
# Attach event handlers to the new DOM elements. click click click
|
|
build: ->
|
|
$("<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'));
|
|
|
|
# Attach event handlers to the newly minted DOM elements
|
|
$('#lightboxOverlay')
|
|
.hide()
|
|
.on 'click', (e) =>
|
|
@end()
|
|
return false
|
|
|
|
$lightbox = $('#lightbox')
|
|
|
|
$lightbox
|
|
.hide()
|
|
.on 'click', (e) =>
|
|
if $(e.target).attr('id') == 'lightbox' then @end()
|
|
return false
|
|
|
|
$lightbox.find('.lb-outerContainer').on 'click', (e) =>
|
|
if $(e.target).attr('id') == 'lightbox' then @end()
|
|
return false
|
|
|
|
$lightbox.find('.lb-prev').on 'click', (e) =>
|
|
@changeImage @currentImageIndex - 1
|
|
return false
|
|
|
|
$lightbox.find('.lb-next').on 'click', (e) =>
|
|
@changeImage @currentImageIndex + 1
|
|
return false
|
|
|
|
$lightbox.find('.lb-loader, .lb-close').on 'click', (e) =>
|
|
@end()
|
|
return false
|
|
|
|
return
|
|
|
|
# Show overlay and lightbox. If the image is part of a set, add siblings to album array.
|
|
start: ($link) ->
|
|
$(window).on "resize", @sizeOverlay
|
|
|
|
$('select, object, embed').css visibility: "hidden"
|
|
$('#lightboxOverlay')
|
|
.width( $(document).width())
|
|
.height( $(document).height() )
|
|
.fadeIn( @options.fadeDuration )
|
|
|
|
@album = []
|
|
imageNumber = 0
|
|
|
|
if $link.attr('rel') == 'lightbox'
|
|
# If image is not part of a set
|
|
@album.push link: $link.attr('href'), title: $link.attr('title')
|
|
else
|
|
# Image is part of a set
|
|
for a, i in $( $link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]')
|
|
@album.push link: $(a).attr('href'), title: $(a).attr('title')
|
|
if $(a).attr('href') == $link.attr('href')
|
|
imageNumber = i
|
|
|
|
# Position lightbox
|
|
$window = $(window)
|
|
top = $window.scrollTop() + $window.height()/10
|
|
left = $window.scrollLeft()
|
|
$lightbox = $('#lightbox')
|
|
$lightbox
|
|
.css
|
|
top: top + 'px'
|
|
left: left + 'px'
|
|
.fadeIn( @options.fadeDuration)
|
|
|
|
@changeImage(imageNumber)
|
|
return
|
|
|
|
|
|
# Hide most UI elements in preparation for the animated resizing of the lightbox.
|
|
changeImage: (imageNumber) ->
|
|
|
|
@disableKeyboardNav()
|
|
$lightbox = $('#lightbox')
|
|
$image = $lightbox.find('.lb-image')
|
|
|
|
@sizeOverlay()
|
|
$('#lightboxOverlay').fadeIn( @options.fadeDuration )
|
|
|
|
$('.loader').fadeIn 'slow'
|
|
$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide()
|
|
|
|
$lightbox.find('.lb-outerContainer').addClass 'animating'
|
|
|
|
# When image to show is preloaded, we send the width and height to sizeContainer()
|
|
preloader = new Image
|
|
preloader.onload = () =>
|
|
$image.attr 'src', @album[imageNumber].link
|
|
# Bug fix by Andy Scott
|
|
$image.width = preloader.width
|
|
$image.height = preloader.height
|
|
# End of bug fix
|
|
@sizeContainer preloader.width, preloader.height
|
|
|
|
preloader.src = @album[imageNumber].link
|
|
@currentImageIndex = imageNumber
|
|
return
|
|
|
|
|
|
# Stretch overlay to fit the document
|
|
sizeOverlay: () ->
|
|
$('#lightboxOverlay')
|
|
.width( $(document).width())
|
|
.height( $(document).height() )
|
|
|
|
|
|
# Animate the size of the lightbox to fit the image we are showing
|
|
sizeContainer: (imageWidth, imageHeight) ->
|
|
$lightbox = $('#lightbox')
|
|
|
|
$outerContainer = $lightbox.find('.lb-outerContainer')
|
|
oldWidth = $outerContainer.outerWidth()
|
|
oldHeight = $outerContainer.outerHeight()
|
|
|
|
$container = $lightbox.find('.lb-container')
|
|
containerTopPadding = parseInt $container.css('padding-top'), 10
|
|
containerRightPadding = parseInt $container.css('padding-right'), 10
|
|
containerBottomPadding = parseInt $container.css('padding-bottom'), 10
|
|
containerLeftPadding = parseInt $container.css('padding-left'), 10
|
|
|
|
newWidth = imageWidth + containerLeftPadding + containerRightPadding
|
|
newHeight = imageHeight + containerTopPadding + containerBottomPadding
|
|
|
|
# Animate just the width, just the height, or both, depending on what is different
|
|
if newWidth != oldWidth && newHeight != oldHeight
|
|
$outerContainer.animate
|
|
width: newWidth,
|
|
height: newHeight
|
|
, @options.resizeDuration, 'swing'
|
|
else if newWidth != oldWidth
|
|
$outerContainer.animate
|
|
width: newWidth
|
|
, @options.resizeDuration, 'swing'
|
|
else if newHeight != oldHeight
|
|
$outerContainer.animate
|
|
height: newHeight
|
|
, @options.resizeDuration, 'swing'
|
|
|
|
# Wait for resize animation to finsh before showing the image
|
|
setTimeout =>
|
|
$lightbox.find('.lb-dataContainer').width(newWidth)
|
|
$lightbox.find('.lb-prevLink').height(newHeight)
|
|
$lightbox.find('.lb-nextLink').height(newHeight)
|
|
@showImage()
|
|
return
|
|
, @options.resizeDuration
|
|
|
|
return
|
|
|
|
|
|
# Display the image and it's details and begin preload neighboring images.
|
|
showImage: ->
|
|
$lightbox = $('#lightbox')
|
|
$lightbox.find('.lb-loader').hide()
|
|
$lightbox.find('.lb-image').fadeIn 'slow'
|
|
|
|
@updateNav()
|
|
@updateDetails()
|
|
@preloadNeighboringImages()
|
|
@enableKeyboardNav()
|
|
|
|
return
|
|
|
|
|
|
# Display previous and next navigation if appropriate.
|
|
updateNav: ->
|
|
$lightbox = $('#lightbox')
|
|
$lightbox.find('.lb-nav').show()
|
|
if @currentImageIndex > 0 then $lightbox.find('.lb-prev').show();
|
|
if @currentImageIndex < @album.length - 1 then $lightbox.find('.lb-next').show();
|
|
return
|
|
|
|
# Display caption, image number, and closing button.
|
|
updateDetails: ->
|
|
$lightbox = $('#lightbox')
|
|
|
|
if typeof @album[@currentImageIndex].title != 'undefined' && @album[@currentImageIndex].title != ""
|
|
$lightbox.find('.lb-caption')
|
|
.html( @album[@currentImageIndex].title)
|
|
.fadeIn('fast')
|
|
|
|
if @album.length > 1
|
|
$lightbox.find('.lb-number')
|
|
.html( @options.labelImage + ' ' + (@currentImageIndex + 1) + ' ' + @options.labelOf + ' ' + @album.length)
|
|
.fadeIn('fast')
|
|
else
|
|
$lightbox.find('.lb-number').hide()
|
|
|
|
$lightbox.find('.lb-outerContainer').removeClass 'animating'
|
|
|
|
$lightbox.find('.lb-dataContainer')
|
|
.fadeIn @resizeDuration, () =>
|
|
@sizeOverlay()
|
|
return
|
|
|
|
|
|
# Preload previos and next images in set.
|
|
preloadNeighboringImages: ->
|
|
if @album.length > @currentImageIndex + 1
|
|
preloadNext = new Image
|
|
preloadNext.src = @album[@currentImageIndex + 1].link
|
|
|
|
if @currentImageIndex > 0
|
|
preloadPrev = new Image
|
|
preloadPrev.src = @album[@currentImageIndex - 1].link
|
|
return
|
|
|
|
|
|
enableKeyboardNav: ->
|
|
$(document).on 'keyup.keyboard', $.proxy( @keyboardAction, this)
|
|
return
|
|
|
|
|
|
disableKeyboardNav: ->
|
|
$(document).off '.keyboard'
|
|
return
|
|
|
|
|
|
keyboardAction: (event) ->
|
|
KEYCODE_ESC = 27
|
|
KEYCODE_LEFTARROW = 37
|
|
KEYCODE_RIGHTARROW = 39
|
|
|
|
keycode = event.keyCode
|
|
key = String.fromCharCode(keycode).toLowerCase()
|
|
|
|
if keycode == KEYCODE_ESC || key.match(/x|o|c/)
|
|
@end()
|
|
else if key == 'p' || keycode == KEYCODE_LEFTARROW
|
|
if @currentImageIndex != 0
|
|
@changeImage @currentImageIndex - 1
|
|
else if key == 'n' || keycode == KEYCODE_RIGHTARROW
|
|
if @currentImageIndex != @album.length - 1
|
|
@changeImage @currentImageIndex + 1
|
|
return
|
|
|
|
|
|
# Closing time. :-(
|
|
end: ->
|
|
@disableKeyboardNav()
|
|
$(window).off "resize", @sizeOverlay
|
|
$('#lightbox').fadeOut @options.fadeDuration
|
|
$('#lightboxOverlay').fadeOut @options.fadeDuration
|
|
$('select, object, embed').css visibility: "visible"
|
|
|
|
|
|
$ ->
|
|
options = new LightboxOptions
|
|
lightbox = new Lightbox options
|