I found a nice lightbox2-fork, which I tried to improve. After about six hours of work the code passes jslint. I also tried to change variable names for better understanding of what they are for.
What else can be improved there?
jsfiddle (yet unmodified but working CSS)
$(function () {
"use strict";
var border,
borderColor,
content,
contentHeight,
counter,
counterContainer,
frameHeight,
frameWidth,
ie9,
iOS,
isNext,
isPrev,
items,
keyNavigationDisabled,
margins,
nextItem,
overlay,
overlayColor,
preload,
prevItem,
title,
titleContainer,
top,
url,
vcore,
vwrap,
windowHeight,
wrapAround;
// center on load
function updateoverlay(notopzero) {
notopzero = notopzero || false;
if (notopzero !== true) {
$(window).scrollTop(0);
}
titleContainer.html(title);
content.find(">:first-child").addClass("lightbox");
$(".lightbox").css("width", frameWidth).css("height", frameHeight).css("padding", border).css("background", borderColor);
contentHeight = content.outerHeight();
windowHeight = $(window).height();
if (contentHeight + 80 < windowHeight) {
margins = (windowHeight - contentHeight) / 2;
content.css("margin-bottom", margins);
content.css("margin-top", margins);
} else {
content.css("margin-bottom", "40px");
content.css("margin-top", "40px");
}
content.animate({"opacity": "1"}, "slow");
}
// center on resize
function updateoverlayresize() {
if ($(".vbox-content").length) {
contentHeight = content.height();
windowHeight = $(window).height();
if (contentHeight + 80 < windowHeight) {
margins = (windowHeight - contentHeight) / 2;
content.css("margin-bottom", margins);
content.css("margin-top", margins);
} else {
content.css("margin-bottom", "40px");
content.css("margin-top", "40px");
}
}
}
// load Ajax
function loadAjax() {
$.ajax({
url: url,
cache: false
}).done(function (msg) {
content.html('<div class="vbox-inline">' + msg + "</div>");
updateoverlay(true);
}).fail(function () {
content.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>');
updateoverlay(true);
});
}
// load iframe
function loadIframe() {
content.html('<iframe class="vbox-frame" src="' + url + '"></iframe>');
// valid only for iframes in same url
// $(".vbox-frame").load(function () {
updateoverlay();
// });
}
// load Vimeo
function loadVimeo() {
var part = url.split("/"),
videoid = part[part.length - 1];
content.html('<iframe class="vbox-frame" src="http://player.vimeo.com/video/' + videoid + '"></iframe>');
updateoverlay();
}
// load YouTube
function loadYoutube() {
var part = url.split("/"),
videoid = part[part.length - 1];
content.html('<iframe class="vbox-frame" allowfullscreen src="http://www.youtube.com/embed/' + videoid + '"></iframe>');
updateoverlay();
}
// load inline element
function loadInline() {
content.html('<div class="vbox-inline">' + $(url).html() + "</div>");
updateoverlay();
}
// preload images
function preloadFirst() {
preload = $(".vbox-content").find("img");
preload.one("load", function () {
updateoverlay();
}).each(function () {
if (this.complete) {
$(this).load();
}
});
}
$.fn.extend({
vbox: function (overwriteOptions) {
var defaults = {
border: "0",
borderColor: "#ffffff",
counter: true,
frameHeight: "",
frameWidth: "",
wrapAround: false
},
options = $.extend(defaults, overwriteOptions);
return this.each(function () {
var obj = $(this);
obj.addClass("vbox-item");
obj.data("frameWidth", options.frameWidth);
obj.data("frameHeight", options.frameHeight);
obj.data("border", options.border);
obj.data("borderColor", options.borderColor);
obj.data("counter", options.counter);
obj.data("wrapAround", options.wrapAround);
iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
ie9 = ((document.all && !window.atob) ? true : false);
obj.click(function (e) {
e.stopPropagation();
e.preventDefault();
obj = $(this);
overlayColor = obj.data("overlay");
frameWidth = obj.data("frameWidth");
frameHeight = obj.data("frameHeight");
border = obj.data("border");
borderColor = obj.data("borderColor");
isNext = false;
isPrev = false;
keyNavigationDisabled = false;
url = obj.attr("href");
top = $(window).scrollTop();
top = -top;
// check if there is a next or previous image
function checknav() {
counter = obj.data("counter");
wrapAround = obj.data("wrapAround");
items = $('.vbox-item[data-vbox="' + obj.data("vbox") + '"]');
if (items.length > 0 && counter === true) {
counterContainer.html(items.index(obj) + 1 + " / " + items.length);
counterContainer.fadeIn();
} else {
counterContainer.fadeOut();
}
nextItem = items.eq(items.index(obj) + 1);
prevItem = items.eq(items.index(obj) - 1);
if (obj.attr("title")) {
title = obj.attr("title");
titleContainer.fadeIn();
} else {
title = "";
titleContainer.fadeOut();
}
if (wrapAround === true) {
isNext = true;
isPrev = true;
if (nextItem.length < 1) {
nextItem = items.eq(0);
}
if (items.index(obj) < 1) {
prevItem = items.eq(items.index(items.length));
}
} else {
if (nextItem.length > 0) {
$(".vbox-next").css("display", "block");
isNext = true;
} else {
$(".vbox-next").css("display", "none");
isNext = false;
}
if (items.index(obj) > 0) {
$(".vbox-prev").css("display", "block");
isPrev = true;
} else {
$(".vbox-prev").css("display", "none");
isPrev = false;
}
}
}
$("body").wrapInner('<div class="vwrap"></div>');
vwrap = $(".vwrap");
vcore = '<div class="vbox-overlay" style="background:' + overlayColor + '"><div class="vbox-preloader"><i class="fa fa-spinner fa-spin"></i></div><div class="vbox-container"><div class="vbox-content"></div></div><div class="vbox-title"></div><div class="vbox-num">0/0</div><div class="vbox-close"><i class="fa fa-times"></i></div><div class="vbox-next"><i class="fa fa-chevron-right"></i></div><div class="vbox-prev"><i class="fa fa-chevron-left"></i></div></div>';
$("body").append(vcore);
//container = $(".vbox-container");
content = $(".vbox-content");
counterContainer = $(".vbox-num");
overlay = $(".vbox-overlay");
titleContainer = $(".vbox-title");
content.html("");
content.css("opacity", "0");
checknav();
overlay.css("min-height", $(window).outerHeight() + 130);
if (ie9) {
overlay.animate({opacity: 1}, 250, function () {
overlay.css({
"min-height": $(window).outerHeight(),
height: "auto"
});
if (obj.data("type") === "iframe") {
loadIframe();
} else if (obj.data("type") === "inline") {
loadInline();
} else if (obj.data("type") === "ajax") {
loadAjax();
} else if (obj.data("type") === "vimeo") {
loadVimeo();
} else if (obj.data("type") === "youtube") {
loadYoutube();
} else {
content.html('<img src="' + url + '">');
preloadFirst();
}
});
} else {
overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
overlay.css({
"min-height": $(window).outerHeight(),
height: "auto"
});
if (obj.data("type") === "iframe") {
loadIframe();
} else if (obj.data("type") === "inline") {
loadInline();
} else if (obj.data("type") === "ajax") {
loadAjax();
} else if (obj.data("type") === "vimeo") {
loadVimeo();
} else if (obj.data("type") === "youtube") {
loadYoutube();
} else {
content.html('<img src="' + url + '">');
preloadFirst();
}
});
overlay.css("opacity", "1");
}
if (iOS) {
vwrap.css({
"opacity": "0",
"position": "fixed",
"top": top
}).data("top", top);
} else {
vwrap.css({
"position": "fixed",
"top": top
}).data("top", top);
$(window).scrollTop(0);
}
// keyboard navigation
$("body").keydown(function (e) {
if (keyNavigationDisabled) {
return;
}
if (e.keyCode === 27) {
$(".vbox-close").click();
}
if (e.keyCode === 37 && isPrev === true) {
border = prevItem.data("border");
borderColor = prevItem.data("borderColor");
frameWidth = prevItem.data("frameWidth");
frameHeight = prevItem.data("frameHeight");
keyNavigationDisabled = true;
overlayColor = prevItem.data("overlay");
url = prevItem.attr("href");
if (prevItem.attr("title")) {
title = prevItem.attr("title");
} else {
title = "";
}
if (overlayColor === undefined) {
overlayColor = "";
}
overlay.css("min-height", $(window).outerHeight() + 130);
content.animate({opacity: 0}, 500, function () {
overlay.css("min-height", $(window).outerHeight()).css("background", overlayColor);
if (prevItem.data("type") === "iframe") {
loadIframe();
} else if (prevItem.data("type") === "inline") {
loadInline();
} else if (prevItem.data("type") === "ajax") {
loadAjax();
} else if (prevItem.data("type") === "youtube") {
loadYoutube();
} else if (prevItem.data("type") === "vimeo") {
loadVimeo();
} else {
content.html('<img src="' + url + '">');
preloadFirst();
}
obj = prevItem;
checknav();
keyNavigationDisabled = false;
});
}
if (e.keyCode === 39 && isNext === true) {
border = nextItem.data("border");
borderColor = nextItem.data("borderColor");
frameWidth = nextItem.data("frameWidth");
frameHeight = nextItem.data("frameHeight");
keyNavigationDisabled = true;
overlayColor = nextItem.data("overlay");
url = nextItem.attr("href");
if (nextItem.attr("title")) {
title = nextItem.attr("title");
} else {
title = "";
}
if (overlayColor === undefined) {
overlayColor = "";
}
overlay.css("min-height", $(window).outerHeight() + 130);
content.animate({opacity: 0}, 500, function () {
overlay.css("min-height", $(window).outerHeight()).css("background", overlayColor);
if (nextItem.data("type") === "iframe") {
loadIframe();
} else if (nextItem.data("type") === "inline") {
loadInline();
} else if (nextItem.data("type") === "ajax") {
loadAjax();
} else if (nextItem.data("type") === "youtube") {
loadYoutube();
} else if (nextItem.data("type") === "vimeo") {
loadVimeo();
} else {
content.html('<img src="' + url + '">');
preloadFirst();
}
obj = nextItem;
checknav();
keyNavigationDisabled = false;
});
}
});
// next image
$(".vbox-next").click(function () {
border = nextItem.data("border");
borderColor = nextItem.data("borderColor");
frameWidth = nextItem.data("frameWidth");
frameHeight = nextItem.data("frameHeight");
overlayColor = nextItem.data("overlay");
url = nextItem.attr("href");
if (nextItem.attr("title")) {
title = nextItem.attr("title");
} else {
title = "";
}
if (overlayColor === undefined) {
overlayColor = "";
}
overlay.css("min-height", $(window).outerHeight() + 130);
content.animate({opacity: 0}, 500, function () {
overlay.css("min-height", $(window).outerHeight()).css("background", overlayColor);
if (nextItem.data("type") === "iframe") {
loadIframe();
} else if (nextItem.data("type") === "inline") {
loadInline();
} else if (nextItem.data("type") === "ajax") {
loadAjax();
} else if (nextItem.data("type") === "youtube") {
loadYoutube();
} else if (nextItem.data("type") === "vimeo") {
loadVimeo();
} else {
content.html('<img src="' + url + '">');
preloadFirst();
}
obj = nextItem;
checknav();
});
});
// previous image
$(".vbox-prev").click(function () {
border = prevItem.data("border");
borderColor = prevItem.data("borderColor");
frameWidth = prevItem.data("frameWidth");
frameHeight = prevItem.data("frameHeight");
overlayColor = prevItem.data("overlay");
url = prevItem.attr("href");
if (prevItem.attr("title")) {
title = prevItem.attr("title");
} else {
title = "";
}
if (overlayColor === undefined) {
overlayColor = "";
}
overlay.css("min-height", $(window).outerHeight() + 130);
content.animate({opacity: 0}, 500, function () {
overlay.css("min-height", $(window).outerHeight()).css("background", overlayColor);
if (prevItem.data("type") === "iframe") {
loadIframe();
} else if (prevItem.data("type") === "inline") {
loadInline();
} else if (prevItem.data("type") === "ajax") {
loadAjax();
} else if (prevItem.data("type") === "youtube") {
loadYoutube();
} else if (prevItem.data("type") === "vimeo") {
loadVimeo();
} else {
content.html('<img src="' + url + '">');
preloadFirst();
}
obj = prevItem;
checknav();
});
});
// close
$(".vbox-close, .vbox-overlay").click(function (e) {
if (!$(e.target).is(".lightbox, .vbox-prev, .vbox-prev .fa, .vbox-next, .vbox-next .fa, .lightbox *")) {
if (ie9) {
overlay.animate({opacity: 0}, 500, function () {
overlay.remove();
$(".vwrap").children().unwrap();
$(window).scrollTop(-top);
keyNavigationDisabled = false;
});
} else {
overlay.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
overlay.remove();
if (iOS) {
$(".vwrap").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$(".vwrap").children().unwrap();
$(window).scrollTop(-top);
});
$(".vwrap").css("opacity", "1");
} else {
$(".vwrap").children().unwrap();
$(window).scrollTop(-top);
}
keyNavigationDisabled = false;
});
overlay.css("opacity", "0");
}
}
});
return false;
});
});
}
});
$(window).resize(function () {
updateoverlayresize();
});
});