Update version to 0.4

master
jfdelrio 2007-10-09 14:08:11 +00:00
parent d4d610beaa
commit d3e3bd5973
1 changed files with 356 additions and 363 deletions

View File

@ -1,15 +1,11 @@
/** /**
* jQuery Lightbox * jQuery Lightbox
* Version 0.3 - 09/17/2007 * Version 0.4 - 09/17/2007
* @author Warren Krewenki * @author Warren Krewenki
* *
* Based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) * Based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* Originally written to make use of the Prototype framework, and Script.acalo.us, now altered to use jQuery. * Originally written to make use of the Prototype framework, and Script.acalo.us, now altered to use jQuery.
* *
* New in this version:
* - fully encapsulated in one JSON object
* - new method of adding the lightbox html
* - removal of some dead functions
**/ **/
var Lightbox = { var Lightbox = {
@ -20,7 +16,12 @@ var Lightbox = {
imageArray : new Array, imageArray : new Array,
activeImage : null, activeImage : null,
inprogress : false, inprogress : false,
resizeSpeed : 350,
destroyElement: function(id){
if(el = document.getElementById(id)){
el.parentNode.removeChild(el);
}
},
initialize: function() { initialize: function() {
// attach lightbox to any links with rel 'lightbox' // attach lightbox to any links with rel 'lightbox'
$("a").each(function(){ $("a").each(function(){
@ -32,7 +33,8 @@ var Lightbox = {
} }
}); });
$("body").append('<div id="overlay"></div><div id="lightbox"><div id="outerImageContainer"><div id="imageContainer"><img id="lightboxImage"><div style="" id="hoverNav"><a href="#" id="prevLink"></a><a href="#" id="nextLink"></a></div><div id="loading"><a href="#" id="loadingLink"><img src="admin/css/images/loading.gif"></a></div></div></div><div id="imageDataContainer"><div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><a href="#" id="bottomNavClose"><img src="admin/css/images/close.gif"></a></div></div></div></div>'); Lightbox.destroyElement('overlay'); Lightbox.destroyElement('lightbox');
$("body").append('<div id="overlay"></div><div id="lightbox"><div id="outerImageContainer"><div id="imageContainer"><img id="lightboxImage"><div style="" id="hoverNav"><a href="#" id="prevLink"></a><a href="#" id="nextLink"></a></div><div id="loading"><a href="#" id="loadingLink"><img src="'+Lightbox.fileLoadingImage+'"></a></div></div></div><div id="imageDataContainer"><div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><a href="#" id="bottomNavClose"><img src="'+Lightbox.fileBottomNavCloseImage+'"></a></div></div></div></div>');
$("#overlay").click(function(){ Lightbox.end(); }).hide(); $("#overlay").click(function(){ Lightbox.end(); }).hide();
$("#lightbox").click(function(){ Lightbox.end();}).hide(); $("#lightbox").click(function(){ Lightbox.end();}).hide();
$("#loadingLink").click(function(){ Lightbox.end(); return false;}); $("#loadingLink").click(function(){ Lightbox.end(); return false;});
@ -47,13 +49,6 @@ var Lightbox = {
start: function(imageLink) { start: function(imageLink) {
$("select, embed, object").hide(); $("select, embed, object").hide();
// *
var urlImg = $("img", imageLink).attr("src");
urlImg = urlImg.split("classes");
//urlImg = urlImg[0]+'admin/css/images/loading.gif';
$("#loadingLink > img").attr({src:urlImg[0]+'admin/css/images/loading.gif'})
$("#bottomNavClose > img").attr({src:urlImg[0]+'admin/css/images/close.gif'})
// stretch overlay to fill page and fade in // stretch overlay to fill page and fade in
var arrayPageSize = Lightbox.getPageSize(); var arrayPageSize = Lightbox.getPageSize();
$("#overlay").hide().css({width: '100%', height: arrayPageSize[1]+'px', opacity : Lightbox.overlayOpacity}).fadeIn(); $("#overlay").hide().css({width: '100%', height: arrayPageSize[1]+'px', opacity : Lightbox.overlayOpacity}).fadeIn();
@ -119,7 +114,6 @@ var Lightbox = {
// once image is preloaded, resize image container // once image is preloaded, resize image container
imgPreloader.onload=function(){ imgPreloader.onload=function(){
console.log(Lightbox.activeImage);
document.getElementById('lightboxImage').src = Lightbox.imageArray[Lightbox.activeImage][0]; document.getElementById('lightboxImage').src = Lightbox.imageArray[Lightbox.activeImage][0];
Lightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height); Lightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
} }
@ -148,10 +142,9 @@ var Lightbox = {
wDiff = this.widthCurrent - widthNew; wDiff = this.widthCurrent - widthNew;
hDiff = this.heightCurrent - heightNew; hDiff = this.heightCurrent - heightNew;
$('#outerImageContainer').animate({width: widthNew},400,'linear',function(){ $('#outerImageContainer').animate({width: widthNew, height: heightNew},Lightbox.resizeSpeed,'linear',function(){
$("#outerImageContainer").animate({height: heightNew},400,'linear',function(){
Lightbox.showImage(); Lightbox.showImage();
});
}); });