lightbox captions and index
Hi, the code I am working with is below. I'm trying to add captions (taken from the image "title" attribute), and also show that it's "image 1 of 14" (which will change depending on the image, of course).
I know the code is messy, but any help would be greatly appreciated.
-
$(document).ready(function() {
imageViewer();
});
/* ---------------------------- DECLARING VARIABLES ---------------------------- */
function imageViewer() {
var overlay = $('<div id="overlay" style="display: none"></div>');
var imgLinks = $('a[rel^=imageViewer]');
var displayImage = $('<div id="imageViewer" style="display: none"></div>');
var close = $('<a href="#close" class="close"></a>');
var goal = $('<div class="goal"></div>');
var prev = $('<a href="#prev" class="prev"></a>');
var next = $('<a href="#next" class="next"></a>');
var imagesIndex;
var imgLength;
var title;
/* ------------------------- APPENDING ALL THE DIVS -------------------------- */
$('body').append(overlay).append(displayImage);
displayImage.append(close).append(goal).append(prev).append(next);
displayImage.show().css({'margin-top': 0, 'margin-left': 0}).hide();
close.click(function(cc) {
overlay.add(displayImage).fadeOut('normal');
});
/* ------------------------------- KEY PRESSES ------------------------------- */
$(window).keyup(function(keys){
if(keys.keyCode == 27){
close.click();
return false;
}else if(keys.keyCode == 39){
next.click();
return false;
}else if(keys.keyCode == 37){
prev.click();
return false;
}
});
/* ------------------- OPENING IMAGES AND BETWEEN IMAGES ----------------------- */
imgLinks.each(function(index) {
var link = $(this);
link.click(function(cc) {
cc.preventDefault();
open(link.attr('href'));
imgLinks.filter('.selected').removeClass('selected');
link.addClass('selected');
});
link.attr({'itsPosition': index});
});
var open = function(url) {
if(displayImage.is(':visible')) {
goal.children().fadeOut('normal', function() {
goal.children().remove();
loadImage(url);
});
} else {
goal.children().remove();
overlay.add(displayImage).fadeIn('normal',function(){
loadImage(url);
});
}
}
/* ------------------ ANIMATION OF LOAD IMAGE AND IMAGEVIEWER ----------------- */
var loadImage = function(url) {
if(displayImage.is('.loading')) { return; }
displayImage.addClass('loading');
var img = new Image();
img.onload = function() {
displayImage.animate({'width': img.width,'height': img.height, 'top': 100, 'left': 100},'slow', function(){
goal.append(img);
$(img).fadeIn('normal', function() {
displayImage.removeClass('loading');
});
})
}
img.src = url;
}
/* ----------------------------- PREVIOUS AND NEXT ----------------------------- */
prev.add(next).click(function(cc) {
cc.preventDefault();
var current = parseInt(imgLinks.filter('.selected').attr('itsPosition'),10);
var to = $(this).is('.prev') ? imgLinks.eq(current - 1) : imgLinks.eq(current + 1);
if(!to.size()) {
to = $(this).is('.prev') ? imgLinks.eq(links.size() - 1) : imgLinks.eq(0);
}
if(to.size()) {
to.click();
}
});