ola ,

tutti conoscerete il bellissimo effetto Lightbox:

http://www.huddletogether.com/projects/lightbox/

io lo adoro e infatti l'ho usato tantissimo nel sito, tuttavia l'ho sempre ritenuto molto pesante con i suoi oltre 100kb di javascript.
In realtà il solo lightbox pesa 24kb ma necessita di altre librerie che, almeno nel caso del mio sito specifico, non vengono più riutilizzate...

Ollora ho pensato di realizzare qualcosa di simile riducendo il codice javascript il più possibile.
Un esempio lo trovate in questa pagina: http://viaggiare.stragulp.com/blog/2...a_lisbona.html
cliccate le immagini piccole per vedere l'effetto.

Il javascript pesa 4,5kb quindi non aspettatevi troppo

Riporto di seguito il codice:

codice:
function Settare() {	
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('imgview'))){
				//anchor.onclick = function () {open_img(this); return false;}
				var contenuto = anchor.innerHTML.split('>');
				contenuto = contenuto.join(' onClick="open_img(\''+anchor.getAttribute('href')+'\'); return false;" >');
				anchor.innerHTML=contenuto;
			}
		}
}

//info schermo
var wid = 1;
var hig = screen.height;
var max_width = screen.width-22;


function open_img(elem){
	backg = document.createElement("DIV");
	backg.setAttribute("id", "baco");
	backg.style.backgroundColor='#000';
	backg.style.zIndex=100;
	backg.style.width=wid+'px';
	backg.style.height=hig+'px';
	backg.style.position='absolute';
	backg.style.left=0;
	backg.style.top=0;
	document.body.appendChild(backg);
	fade('baco',95);
    sfondo(elem);
	
}

//dati accelerazione
var x=1;
var t=2;
var v = 6;

function sfondo(elem){
   if(x>max_width) x = max_width;
   document.getElementById("baco").style.width = x+'px';
   if(x<max_width){
   x = x*(t/v)*t*t;
   window.setTimeout("sfondo('"+elem+"')", 7);
   }else{
   x=1;
   create_box(elem);
   }
}

var xx = Math.round(screen.availWidth / 2)-50; 
var yy = Math.round(screen.availHeight / 2)-50; 

	
function create_box(elem){

	boxel = document.createElement("DIV");
	boxel.setAttribute("id", "box");
	//boxel.setAttribute("style", "background-color:#fff; text-align:right; padding:10px; z-index:102; position:fixed; left:"+xx+"px; top:"+yy+"px;");
	boxel.style.backgroundColor='#fff';
	boxel.style.padding=10+'px';
	boxel.style.zIndex=102;
	boxel.style.position='absolute';
	boxel.style.left=xx;
	boxel.style.top=yy;
	boxel.innerHTML = '<input type="button" id="buttonClose" name="buttonClose" value="X chiudi" onClick="chiudi_box()" style=" display:none; margin-bottom:15px">
';
	boxel.innerHTML += '[img]cosa_fare_e_cosa_vedere_a_lisbona_files/loading.gif[/img]';
	boxel.innerHTML += '[img]'+elem+'[/img]';
	//boxel.innerHTML += '

<input type="button" id="buttonClose" name="buttonClose" value="X chiudi" onClick="chiudi_box()" style=" display:none">';
	document.body.appendChild(boxel);
	setta_box();
}

function setta_box(){

   if(document.images['George'].width!=0 | document.images['George'].complete){
   document.getElementById("preload").style.display="none";
   document.getElementById("buttonClose").style.display="";
   x_new = xx - Math.round((document.images['George'].width+20) / 2);
   y_new = yy - Math.round((document.images['George'].height+20) / 2);
   document.getElementById("box").style.left = x_new+'px';
   document.getElementById("box").style.top = y_new+'px';
   fade('box',0,'piu');
   }else{
   window.setTimeout("setta_box();", 100);
   }
}

function chiudi_box(){
   cRemoveElement('box');
   cRemoveElement('baco');
}

function cRemoveElement(id) {
   var node = document.getElementById(id);
   
   if ((node) && (node.parentNode)) {
     var removed = node.parentNode.removeChild(node); 
     return true;
   }

   return false;
}

function fade(Target,opacity,option) {
                fadeTarget = document.getElementById(Target);
                if (opacity <= 100) {
                        if (fadeTarget.style.MozOpacity!=null) {
                                fadeTarget.style.MozOpacity = (opacity/100);
                        } else if (fadeTarget.style.opacity!=null) {
                                fadeTarget.style.opacity = (opacity/100);
                        } else if (fadeTarget.style.filter!=null) {
                                fadeTarget.style.filter = "alpha(opacity="+opacity+")";
                        }
                }
				
				if(option!='undefined'){
				  if(option=='piu'){
				    opacity += 10;
				  }else if (option=='meno'){
				    opacity -= 10;
				  }
				window.setTimeout("fade('"+Target+"',"+opacity+",'"+option+"')", 30);
				}
}

function adatta(){
  hig = document.documentElement.scrollTop+screen.availHeight-50;
  yy = Math.round(screen.availHeight / 2)-50 + document.documentElement.scrollTop;
  if(document.getElementById("baco")!=null) document.getElementById("baco").style.height=hig+'px';
}

window.setTimeout("Settare()", 30);
window.onscroll = adatta;
Alcune funzioni sono state prese qui nel forum

L'ho testao con firefox 1.5 IE 7.0 e Opera.

Mi piacerebbe che mi aiutaste a migliorare il codice e che proviate a testarlo anche voi con i più svariati browser per verificare i bug.

Allora, me la date una mano?