[MOO.RD] immagine caricata a se stante in finestra

[gabar-el]

ciao, stavo provando moo.rd, ho visto alcuni tutorial e alcuni esempi sul sito stesso e facendo alcune prove stavo cercando di adattarli alle mie esigenze. Premetto che non mi intendo di js, quindi è probabile commetta errori banali, che per me però rimangono in un limbo di ignoranza.
Inserito il codice, al click sull'immagine di preview, invece di aprirmisi la finestra ad effetto, non faccio altro che finire in una pagina con l'immagine ingrandita (cioè un comune link all'immagine).
Mi sto chiedendo quindi dove sbaglio. non ho settato particolari css, dipende da quello? pensavo tutto fosse fatto col js di moo.rd

questo il codice js che ho inserito, oltre ovviamente ad aver scaricato il codice necessario alle mie esigenze ed averne controllato i collegamenti:

<script src="js/moo.rd_1.3.2_mootools_1.2.js" type="text/javascript"></script>
<script type="text/javascript">

window.addEvent('domready', function() {
 
	var virtual = new Virtual.Box({
		enable: {
			arrows: true,
			closeButton: true
		},
		effect: 'open',
		leftArrowText: 'indietro',
		rightArrowText: 'avanti',
		closeButtonText: 'chiudi',
		captionOpacity: 0.6
	});
 
	/* Choose the mode */
	var open = $('open');
 
	var types = $$(open);
  
	open.addEvent('click', function() {					   
		types.removeClass('mode_selected');		
		open.addClass('mode_selected');	
		virtual.setEffect('open');
	});
</script>

questo un esempio delle immagini di preview:

<a href="images/rs.jpg" title="testo vario" class="virtualbox">
				[img]images/trs.png[/img]
			</a>

è forse necessario che l'immagine sia dentro un div particolare? scusate l'ignoranza, ma non riesco proprio a capire, in quanto tutto mi sembra un pò più complicato che con altri script tipo lightbox.
grazie

[artorius]

quale versione hai scaricato? (nella parte di download nella sezione "Include MooTools" quale hai selezionato?)

[gabar-el]

ho lasciato la selezione di default: MooTools Needed, quindi la versione 1.2, ma direi che c'è solo quella, o sbaglio? solo moo.rd ha versioni differenti, ma mootools ha solo la 1.2
il mio file ha questo nome: moo.rd_1.3.2_mootools_1.2.js

[artorius]

mmm, no quel campo indica che insieme a moo.rd hai scaricato anche la parte di MooTools che serve a farlo funzionare, e mi sa che in questa parte non ci sia il domReady...

Hai due possibilità: ho riscarichi tutto, selezionando questa volta "MooTools Full include the full version of MooTools 1.2" in quel punto, o modifichi il codice in modo da usare l'evento onload anzichè il domReady (che si tradurrebbe in cambiare window.addEvent('domready', function() in window.addEvent('load', function() )

[gabar-el]

grazie dell'aiuto, mi son accorto andando a rivedere in download che avevo scaricato solo virtual base e non anche virtual box (che crea il box ), non occorre quindi la versione full (almeno credo, per ora funzia).

chiedo un paio di cose:
è possibile, senza conoscere bene js, far si che il box dell'immagine sia ridimensionabile? ovvero definirlo in %?

e per settare i css (tipo link avanti e indietro), dove devo andare? non riesco a identificarli.... :master:

grazie molte

[artorius]

ehm, non capisco bene cosa intendi, se la tua idea è di far ridimensionare l'immagine non puoi perché la stessa non viene caricata come IMG (che ti avrebbe permesso di ridimensionarla) ma viene impostata come sfondo al div che si apre.

[gabar-el]

ah, non sapevo. ho capito.
circa i css invece? come si può formattare il box dell'immagine nei suoi vari contesti?
grazie

[artorius]

mmm temo non si possa perché la dimensione viene generata al volo da JS dopo aver letto le dimensioni dell'immagine. L'unica è vedere nella documentazione se permette una cosa simile o mettere mano al JS

[gabar-el]

mmhhh.... secondo me si può, mi pare di aver visto anche dei video in cui creano una cartella per i css. Sarebbe parecchio limitativo in caso contrario. Il fatto è che non riuscendo a decifrare bene il codice js, faccio poi fatica a implementare i css, ma direi che le possibilità ci sono, appena ho un attimo mi ci metto e faccio sapere se risolvo...
grazie

[gabar-el]

riporto queste info, anche se forse visto il contenuto il titolo del post non è proprio adatto.
Sono riuscito a modificare i CSS di moo.rd, ma chiedo un pò di collaboarzione per riuscire in maniera completa poichè alcune cose mi son rimaste ignote.
partendo da questo link che mi ha aiutato a identificare i vari div sono riuscito a modificare praticamente tutto. Io ho utilizzato il virtual box di moo.rd per la mia galleria immagini e questo è il css che ho apportato:

#virtualBoxFullPage {} /*non sono riuscito a identificarlo*/

p#virtualCaptionTitle { /*modifica il testo del title del link*/
font:0.8em Verdana, Arial, Helvetica, sans-serif; 
color:#000; 
padding:0.5em 0.5em; 
text-align:left;
}

p#virtualCaptionContent {} /*non sono riuscito a identificarlo*/

/*qui sotto i link che non spiego perchè mi paiono abbastanza semplici */
div#virtualArrowsBox a {
margin:0 15px 15px 5px; 
font:0.9em Verdana, Arial, Helvetica, sans-serif; 
float:left;
}

div#virtualArrowsBox a:link, div#virtualArrowsBox a:visited, div#virtualArrowsBox a:active {color:#000;}

div#virtualArrowsBox a:hover, div#virtualArrowsBox a:focus {color:#f00;}

div#virtualArrowsBox a#virtualCloseButton, div#virtualArrowsBox a:link#virtualCloseButton,
div#virtualArrowsBox a:visited#virtualCloseButton,
div#virtualArrowsBox a:active#virtualCloseButton {margin:0 5px 15px 0; color:#f00; float:right;}

div#virtualArrowsBox a:hover#virtualCloseButton, div#virtualArrowsBox a:focus#virtualCloseButton {color:#000;}

div#virtualArrowsBoxText { /*modifica il testo di image n°/n° */
margin:0.1em 0 0; 
font:0.8em Verdana, Arial, Helvetica, sans-serif; 
color:#999;
}

specifico che la maggior parte dei div è presente nel file moo.rd (js) a fondo pagina, grazie alla quale si può arrivare a capire molte cose, in quanto ci son già formattazioni css tramite js.

non sono riuscito a trovare alcune cose:
il div principale, che dal file js mi pareva Box, ma provando a formattarlo in css non ho ottenuto nulla, sono però riuscito a modificarne il background color da js, che di base è bianco (FFFFFF)

il div che da colore al background del title del link, mi pareva virtualMain, ma anche qui stesso risultato, si può comunque modificare da js che di base è grigio chiaro (CCCCCC)

mi interessava poi cambiare lingua al testo di div#virtualArrowsBoxText (la scritta image n°/n°), ho trovato dove modificarla, la scritta image prima del fondo bianco al box (sempre in fondo al js)

image|getProperty|br|result|onClose|remove|Box|FFFFFF|

ma modificandola non appare più l'immagine ovviamente, direi che occorrerebbero altre modifiche che sfuggono alle mie capacità