Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added in a number of fixes

  • Loading branch information...
commit 0018ab1761b4a8884ea51d7a32bd6cc752f4f14b 1 parent cbf80bf
@ksylvest authored
Showing with 102 additions and 90 deletions.
  1. +102 −90 javascripts/jquery.lightbox.js
View
192 javascripts/jquery.lightbox.js
@@ -6,69 +6,74 @@
*
*/
-(function($) {
-
- $.fn.lightbox = function(options) {
-
+(function ($) {
+
+ "use strict";
+
+ $.fn.lightbox = function (options) {
+
var settings = {
duration: 600,
easing: 'easeInOutBack',
dimensions: {
- width: 800,
- height: 600,
+ width: 920,
+ height: 540,
}
};
-
- if (options) $.extend(settings, options);
-
- var html = '<div id="lightbox"><div class="overlay"></div><div class="content"></div></div>';
-
+
+ if (options) {
+ $.extend(settings, options);
+ }
+
+ var html = '<div id="lightbox" class="lightbox"><div class="lightbox-overlay"></div><div class="lightbox-content"></div></div>';
+
$('body:not(:has(#lightbox))').append(html);
-
- var index;
- var $elements = $(this)
+
var $current;
-
+
var $lightbox = $('#lightbox');
- var $overlay = $('#lightbox .overlay');
- var $content = $('#lightbox .content');
-
- var $close = $('<a class="close"></a>');
- var $body = $('<span class="body"></span>');
-
-
- process = function($element) {
-
- var $contents = null;
-
- href = $element.attr('href');
- type = settings['type'];
-
- if (href.match(/(jpeg|jpg|jpe|gif|png|bmp)$/i)) type = 'image';
- if (href.match(/(webm|mov|mp4|m4v|ogg|ogv)$/i)) type = 'video';
-
- switch (type)
- {
- case "image":
- $contents = $("<img />").attr({ 'src' : href });
- break;
- case "video":
- $contents = $("video />").attr({ 'src' : href });
- break;
- default:
- $contents = $(href);
- break;
- }
-
- $contents.css(settings['dimensions']);
-
- $body.html($contents);
-
- };
-
-
- align = function($element) {
-
+ var $overlay = $('#lightbox .lightbox-overlay');
+ var $content = $('#lightbox .lightbox-content');
+
+ var $caption = $('<div class="lightbox-caption"><p><strong>{{title}}</strong></p><p>{{details}}</p></div>')
+ var $close = $('<a class="lightbox-close">&times;</a>');
+ var $prev = $('<a class="lightbox-prev">&lsaquo;</a>');
+ var $next = $('<a class="lightbox-next">&rsaquo;</a>');
+ var $body = $('<span class="lightbox-body"></span>');
+
+
+ var process = function ($element) {
+
+ var $contents = null;
+
+ var href = $element.attr('href');
+ var type = settings['type'];
+
+ if (href.match(/(jpeg|jpg|jpe|gif|png|bmp)$/i)) type = 'image';
+ if (href.match(/(webm|mov|mp4|m4v|ogg|ogv)$/i)) type = 'video';
+
+ switch (type)
+ {
+ case "image":
+ $contents = $("<img />").attr({ 'src' : href });
+ break;
+ case "video":
+ $contents = $("video />").attr({ 'src' : href });
+ break;
+ default:
+ $contents = $(href);
+ break;
+ }
+
+ $contents.css(settings['dimensions']);
+
+ $body.html($contents);
+
+ };
+
+
+ var align = function ($element) {
+
$content.css({
'opacity' : 0.0,
'top' : $element.offset().top,
@@ -78,30 +83,36 @@
'height' : $element.height(),
'width' : $element.width(),
});
-
+
};
-
-
- setup = function() {
+
+
+ var setup = function () {
$content.append($close);
- $content.append($body);
+ $content.append($caption);
+ $content.append($next);
+ $content.append($prev);
+ $content.append($body);
};
-
-
- teardown = function() {
+
+
+ var teardown = function () {
$close.detach();
- $body.detach();
+ $caption.detach();
+ $next.detach();
+ $prev.detach();
+ $body.detach();
}
-
-
- hide = function($element) {
+
+
+ var hide = function ($element) {
$overlay.css({ 'opacity' : 0.4 });
$overlay.animate({ 'opacity' : 0.0 });
-
+
teardown();
-
- $content.animate({
+
+ $content.animate({
'opacity' : 0.0,
'top' : $element.offset().top,
'left' : $element.offset().left,
@@ -112,16 +123,16 @@
}, settings['duration'], settings['easing'], function () { $lightbox.hide(); });
};
-
-
- show = function($element) {
+
+
+ var show = function ($element) {
$overlay.css({ 'opacity' : 0.0 });
$overlay.animate({ 'opacity' : 0.4 });
$lightbox.show();
- $content.animate({
+ $content.animate({
'opacity' : 1.0,
'top' : Math.round(($(window).height() - settings['dimensions']['height']) / 2),
'left' : Math.round(($(window).width() - settings['dimensions']['width' ]) / 2),
@@ -131,37 +142,38 @@
'width' : settings['dimensions']['width' ],
}, settings['duration'], settings['easing'], function() { setup(); });
};
-
-
+
$(this).each(function (i) {
$(this).click(function(event) {
event.preventDefault();
-
- index = i;
-
+
$current = $(this);
-
+
align($(this));
show($(this));
- process($(this));
+ process($(this));
});
});
-
-
- $overlay.click(function(event) {
+
+
+ $overlay.click(function (event) {
event.preventDefault();
hide($current);
});
-
-
- $close.click(function(event) {
+
+
+ $close.click(function (event) {
event.preventDefault();
hide($current);
});
-
-
+
+
return this;
-
+
};
-
+
+ $(function () {
+ $('[data-lightbox]').lightbox();
+ });
+
}) (jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.