Mootools + slimobox (lightbox 2)

[alex_css]

Salve ragazzi ... date un okkio al seguente codice... sembra tutto ok, ma quando lo implemento in pratica non funziona la libreria SLIMBOX ( l'equivalente LIGHTBOX ma al posto di prototype utilizza mootools).

il seguente è il codice javascript:

unction init(scelta,num){	
var prodotti = { 
"porte" : [ 
                                  { "nome"    : "Battente",  
                                    "descr"   : "il funzionamento della porta VIGHITRONIC e' estremamente pratico ed affidabile in quanto prevede l'utilizzo di un semplice trasponder a contatto che attiva la centralina elettronica che rappresenta il cuore del sistema",
                                    "link"    : "prodotti/porte/interni.jpg" },

                                  { "nome"    : "Scomparsa", 
                                    "descr"   : "descrizione Scomparsa",
                                    "link"    : "prodotti/porte/blindate.jpg" },
                                  { "nome"    : "Pieghevoli", 
                                    "descr"   : "descrizione Pieghevoli",
                                    "link"    : "prodotti/porte/blindate.jpg" },
                                  { "nome"    : "Scorrevoli", 
                                    "descr"   : "descrizione Scorrevoli",
                                    "link"    : "prodotti/porte/blindate.jpg" },
                                  { "nome"    : "Blindate", 
                                    "descr"   : "descrizione blindate",
                                    "link"    : "prodotti/porte/blindate.jpg" }
                                ],
"finestre"   : [ 
                                  { "nome"    : "pvc", 
                                    "descr"   : "descrizione per PVC",
                                    "link"    : "prodotti/finestre/pvc.jpg" },

                                  { "nome"    : "Legno massello",   
                                    "descr"   : "descrizione per massello",
                                    "link"    : "prodotti/finestre/alluminio.jpg" },
                                    
                                  { "nome"    : "legno / alluminio",   
                                    "descr"   : "descrizione per legno / alluminio",
                                    "link"    : "prodotti/finestre/alluminio.jpg" },
                                    
                                  { "nome"    : "alluminio / legno",   
                                    "descr"   : "descrizione per alluminio / legno",
                                    "link"    : "prodotti/finestre/alluminio.jpg" },
                                    
                                  { "nome"    : "per tetto",   
                                    "descr"   : "descrizione per tetto",
                                    "link"    : "prodotti/finestre/alluminio.jpg" },
                                ], 
"scale"   : [ 
                                  { "nome"    : "scale", 
                                    "descr"   : "",
                                    "link"    : "prodotti/finestre/pvc.jpg" }
                                ], 
"parquet"   : [ 
                                  { "nome"    : "parquet", 
                                    "descr"   : "descrizione per PVC",
                                    "link"    : "prodotti/finestre/pvc.jpg" }

                                ], 
"coperture vetrate"   : [ 
                                  { "nome"    : "coperture vetrate", 
                                    "descr"   : "descrizione per PVC",
                                    "link"    : "prodotti/finestre/pvc.jpg" }

                                ], 
"avvolgibili"   : [ 
                                  { "nome"    : "avvolgibili di sicurezza in acciaio", 
                                    "descr"   : "descrizione per PVC",
                                    "link"    : "prodotti/finestre/pvc.jpg" }

                                ], 
"parquet"   : [ 
                                  { "nome"    : "avvolgibili di sicurezza coibentati", 
                                    "descr"   : "descrizione per PVC",
                                    "link"    : "prodotti/finestre/pvc.jpg" }

                                ], 
"controtelai"   : [ 
                                  { "nome"    : "controtelai", 
                                    "descr"   : "descrizione per PVC",
                                    "link"    : "prodotti/finestre/pvc.jpg" }

                                ],
"inferriate di sicurezza"   : [ 
                                  { "nome"    : "inferriate di sicurezza", 
                                    "descr"   : "descrizione per PVC",
                                    "link"    : "prodotti/finestre/pvc.jpg" }

                                ] 
}; 
conv = new Array();
conv[0]="porte";
conv[1]="finestre";
conv[2]=""
conv[3]="";
conv[4]="";
conv[5]="";

var choice = conv[scelta];
var attach = document.getElementById("descrizioni");
attach.innerHTML = "";      						// pulitura 

var box = document.createElement("div");
box.setAttribute("class","box_small");

attach.appendChild(box);

var a = document.createElement("a");
a.setAttribute("href",prodotti[choice][num]["link"]);
a.setAttribute("rel","lightbox[atomium]");
var foto = document.createElement("img");
foto.setAttribute("src",prodotti[choice][num]["link"]);

var descrizione = document.createElement("p");

box.appendChild(descrizione);
a.appendChild(foto);
box.appendChild(a);


		descrizione.innerHTML = ""; 
		descrizione.innerHTML += prodotti[choice][num]["descr"];
}
  

	window.onload = vai;
	
	function vai(){
	
	var mySlide = new Fx.Slide('finestre');
		
	$('toggle_fin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
	
	var mySlide_porte = new Fx.Slide('porte');
		
	$('porte_toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide_porte.toggle();
		e.stop();
	});
	
	var mySlide_avv = new Fx.Slide('avvolgibili');
		
	$('avv_toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide_avv.toggle();
		e.stop();
	});
	
	
	// appena legge li chiude per mostrare agli utenti....
	mySlide.toggle();
	mySlide_avv.toggle();
	mySlide_porte.toggle();
	
	}

codice html segue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/prodotti.js"></script>
<script type="text/javascript" src="scripts/mootools-release-1.11.js"></script>
<link rel="stylesheet" type="text/css" href="css/mozilla.css" media="screen, projection" />

</script>

<title>Pagina HTML-CSS</title>
</head>

	<body>
		need a design?
		<div id="header">
			<div id="g_blank"></div>
			<div class="box">
				<h1></h1>
				<div class="give-it">Give It</div>
				<ul>
					[*]Home
					[*]Dove
					[*]Chi siamo
					[*]Prodotti
					[*]News
					[*]Offerte e Promozioni
					[*]Ufficio Stampa
					[*]Nostri Lavori
					[*]Allutec TV
					[*]Contatti
					[*]Admin
				[/list]
			</div>
		</div>
<div id="prodotti">

	
	<div id="descrizioni"></div>
	
	<ul>
		<li id="top">
		[*]
		<div class="menu">Porte</div>
			<ul id="porte">
				[*]Battente    
				[*]Scomparsa
				[*]Pieghevoli
				[*]Scorrevoli	
        		[*]Blindate
        	[/list]
		<div class="menu">Finestre</div>
			<ul id="finestre">
				[*]PVC			 
				[*]Legno Massello
				[*]Legno / Alluminio
				[*]Alluminio / Legno
				[*]Per tetto
			[/list]
		<div class="menu">Scale</div>
		<div class="menu">Parquet</div>
		<div class="menu">Coperture Vetrate</div>
		<div class="menu">Avvolgibili coibentati</div>
			<ul id="avvolgibili">
					[*]Di sicurezza in acciaio
					[*]Di sicurezza in alluminio
			[/list]
		<div class="menu">Controtelai</div>
		<div class="menu">Inferriate di sicurezza</div>
	    <div id="bottom"></div>
	    [/list]

  
  
</div>
 
 <div id="footer">
	<div id="copyright"></div>
	</div> 
	</body>
</html>

Attendo un vostro suggerimento...grazie!

[alex_css]

nesssuno sà aiutarmi ??????

[Bazzilla]

Ce l'hai un link alla pagina in cui è implementato il tutto, così da poterci dare un'occhiata?

[alex_css]

Avevo postato il codice credendo fosse più facile cmq eccoti il link

http://www.contiello.net/prodotti/prodotti.html

[Bazzilla]

Nell'head della pagina metti il richiamo del javascript di mootools prima di quello dello slimbox e fa sapere come va.

[Bazzilla]

Riguardando meglio, direi che il problema non è quello perchè l'errore avviene anche eseguendo dopo il codice.
Comunque, io uso slimbox su un sito, ma non lo inizializzo come fai tu.

facendo così (function(){Lightbox.init()}).bind(Lightbox) non ti restituisce errore, ma non ti assicuro che si inizializzi, anche se sembra quello che quel comando di inizializzazione vuole fare.

P.S. Magari aggiornando la slimbox alla ultima versione (1.5) il problema scompare,

[alex_css]

purtroppo no....e neppure mettendo prima mootools di slimbox...

.........

[alex_css]

RISOLTO !
Si deve aggiungere :

<img onload="Slimbox.scanPage();">

Per qualsiasi domanda contattatemi.
byez

[Bazzilla]

Me pareva che lo Slimbox si inizializzasse diversamente da come lo avevi impostato tu.
Anzi, scusa per non avertelo segnalato subito.

Bye.

[alex_css]

figurati....capita! grazie cmq.