utilizzo lightbox per principiante

**pasticcina** · 25-02-2009, 11:12

Salve,

ho bisogno di qualche buona anima che mi dica come fare ad applicare Lightbox alle immagini del mio sito per aprirle ingrandite nella stessa finestra e con l'effetto appunto di Lightbox.

Ditemi per favore tutti i codici tenendo presente che sono totalmente digiuna di Javascript.

http://www....l

grazie

**pasticcina** · 25-02-2009, 15:06

uela raga,

non è che sono capitata in un forum dove sono nati tutti maestri?

Ho letto, mi sono documentata, ho tentato di farcela da sola per non disturbare, ho letto anche le guide in questo sito, nonchè i messaggi sul forum che riguardano lightbox ma non ho ottenuto alcun risultatato.
Lo sapete meglio di me che se non è perfetto non funziona.

E' perchè non ce la faccio proprio da sola che ho chiesto aiuto.

ciao

**Straystudios** · 25-02-2009, 16:13

Potrebbe essere l' occasione per lasciar perdere Lightbox e fare a mano tutti i codici come dici, per un' applicazione simile ma non così ostica.
E così ci impari un po'.
Poi semmai Lightbox la rivedi in seguito. Del resto, non saprei dirti di meglio dei tutorial in giapponese che già puoi trovare sul web.

Devo chiudere, al momento.
Io non ti abbandonerò, comunque ...

**pasticcina** · 25-02-2009, 18:17

Originariamente inviato da Straystudios
Potrebbe essere l' occasione per lasciar perdere Lightbox e fare a mano tutti i codici come dici, per un' applicazione simile ma non così ostica.
E così ci impari un po'.
Poi semmai Lightbox la rivedi in seguito. Del resto, non saprei dirti di meglio dei tutorial in giapponese che già puoi trovare sul web.

Devo chiudere, al momento.
Io non ti abbandonerò, comunque ...

Veramente mi è stato consigliato in un'altra parte del sito di utilizzare Lightbox per non dover aprire un'altra finestra e l'idea di lightbox mi piaceva parecchio.
Non ho problemi a scrivermi i codici a mano, pensa che ho imparato l'html tutto col block notes!
E sono grata a chi me lo ha insegnato.
Cmq se mi dai una mano te ne sarò molto grata, sai questo è il mio primo e spero non ultimo sito.

**Straystudios** · 25-02-2009, 21:03

... ed esso conteneva la foto grande; e con esso furono rivelati i principi del display: none; e della trasparenza opacity: ; al popolo di Straystudio.

La foto grande è contenuta nel   div id="large01"   che è però accompagnato da   style="display: none;"   per cui al caricamento pagina è come se non esistesse; sia le sue caratteristiche (dimensioni, sfondo nero, ecc.) che il suo contenuto.

Cliccando sulla foto piccola, si invia un' istruzione JavaScript che commuta la proprietà del DIV da   style="display: none;"   a   style="display: block;"   ed esso si manifesta con tutte le sue proprietà.

Innanzi tutto è un DIV   style="position: absolute;"   che quindi si va a posizionare in maniera autonoma in base alle coordinate   top: 0px; left: 0px;   che lo accompagnano; se fosse un DIV comune si posizionerebbe in calce al Documento la' dove è codificato, mostrando la foto grande sotto la piccola.
Si stende quindi sopra l' altro contenuto del BODY. Noterai che con il mouse sul Link pasticcina non si visualizza più la manina: il DIV disabilita Link e quant' altro sottostante.

Si continua però ad intravedere il resto in trasparenza, perché il DIV pur essendo definito per un colore di sfondo completamente nero, lo abbiamo accompagnato con la proprietà di Style OPACITY

  style="background-color: #000000; opacity: 0.8;"  

Abbiamo superato il problema di aprire un' altra finestra o comunque abbandonare la pagina master; e ottenuto quel particolare effetto che ce la lascia intravedere.
Quindi potrebbe già bastare approntare più DIV con ID diversi, osservare gli stessi ID sui diversi comandi onClick ed avremmo già una galleria.

Ma il nuovo problema che incontriamo, è che la semitrasparenza si estende anche al contenuto del DIV, cioè alla foto grande.

codice:

<html>
<head><title>pasticcina - principio funzionamento</title>

</head>
<body bgcolor="#900000" text="#E3E3E3" link="#E3E3E3" alink="#E3E3E3" vlink="#E3E3E3">

<h1>pasticcina</h1>

<div align="center">
     
     

     
 Clavicembalo “tedesco” a due tastiere da M.Mietke – inizi sec. XVIII
</div>



<div id="large01" 
 style="display: none; position: absolute; top: 0px; left: 0px; 
        width: 100%; height: 100%; background-color: #000000; opacity: 0.8; text-align: center;" 
 onClick='document.getElementById("large01").style.display="none";'
>
      
</div>

</body>
</html>

**Straystudios** · 26-02-2009, 00:32

Nello STYLE dovremmo immettere più di una terminologia per definire l' OPACITY:

 style="display: none; position: absolute; top: 0px; left: 0px;
        width: 100%; height: 100%; background-color: #000000;
        opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); text-align: center;"

Questo per garantire il funzionamento con tutti i Browser.

opacity: ;   è il termine "ufficiale" secondo il W3C e rientra nei CSS3 (Cascading Style Sheets Level 3); ma nel contempo i progettisti dei vari Browser la stavano implementando sui propri prodotti con linguaggi diversi.

-moz-opacity: ;   è stata introdotta sui Navigatori Netscape; entrambe accettano valori da 0 (totale trasparenza) a 1 (piena opacità).

filter: alpha(opacity=50);   è proprietaria di IExplorer ed accetta valori da 0 a 100.

Per cui possiamo incontrare dei Browser che interpretano quella "ufficiale" e la propria, o solo la propria terminologia.

Un Browser Mozilla ad esempio, potrà interpretare   -moz-opacity: ;   e se recente anche   opacity: ;   ma ignorerà   filter: alpha(opacity=50);   nel Tag; la presenza di quest' ultimo non crea conflitto, semplicemente una proprietà sconosciuta da quel Browser, viene da questo ignorata.

Mentre invece, Internet Explorer 6 e 7 riconoscono soltanto   filter: alpha(opacity=80);

Se poi capitassero utenti con Navigatori troppo antiquati che in nessun modo codificano l' opacity, allora vedranno la foto grande su sfondo completamente nero (senza alcuna semi-trasparenza); ma questo, vale anche se tu avessi Lightbox.

Fortunatamente, il   display: none/block;   vale per tutti.

**Straystudios** · 26-02-2009, 14:52

Ora faremo aprire/chiudere due DIV con JavaScript:

  <div id="overlayer"></div >   che sarà quello che produce l' offuscamento della pagina master;

e:

  <div id="large_01"></div >   che sarà in primo piano con il Tag IMG che contiene, con la foto.

entrambi   position: absolute; display: none;
Mantener più istruzioni JS sui comandi (onClick), è possibile; ma istruire una funzione function è meglio, a questo punto.

function show(){
 
  document.getElementById("overlayer").style.display="block";
  document.getElementById("large_01") .style.display="block";

  }

Mentre al gestore d' evento (event handler)   onClick='show();'   si lascia richiamare la function per nome.
Istruiamo anche una simmetrica   function hide()   che provvederà alla ri-chiusura di entrambi i DIV.

Questo esempio può già essere una traccia sufficiente ad elaborare un progetto definitivo.

codice:

<html>
<head><title>overlaying DIVs</title>

<script type="text/javascript" language="javascript">
<!--

function show(){
 document.getElementById("overlayer").style.display="block";
 document.getElementById("large_01") .style.display="block";
 }

function hide(){
 document.getElementById("overlayer").style.display="none";
 document.getElementById("large_01") .style.display="none";
 }
//-->
</script>

</head>
<body bgcolor="#900000" text="#E3E3E3" link="#E3E3E3" alink="#E3E3E3" vlink="#E3E3E3" style="margin: 0;">

<h1>Home Page</h1>

<div align="center">
     

     
 Clavicembalo “tedesco” a due tastiere da M.Mietke – inizi sec. XVIII
</div>



<div id="overlayer" 
 style="display: none; position: absolute; top: 0px; left: 0px; 
        width: 100%; height: 100%; background-color: #000000;
        opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80);" 
 onClick='hide();'
>
</div>

<div id="large_01" 
  style="display: none; position: absolute; top: 50%; left: 50%; 
                                     margin-top: -200px; margin-left: -182px;
                                     border: 1px solid #800000; padding: ;
         width: 362px; height: ; background-color: #606060; color: white;" 
  onClick='hide();'
>
      <p align="right">Chiudi |X|</p>
      
      

      <div style="padding: 8px; color: #FFF;">Clavicembalo “tedesco” a due tastiere da M.Mietke – inizi sec. XVIII</div>
      
</div>


</body>
</html>

Notare un' altra minore modifica nel Tag BODY, con   <body style="margin: 0;">   sono stati portati a zero pixel i margini che i Browser applicano di default al BODY (circa 8px sui quattro lati).
Questo per ovviare ad una diversa interpretazione data a   width: 100%;   del DIV di offuscamento dai diversi Browser:
- Netscape/Mozilla lo estendono per tutta la larghezza della finestra, a prescindere dal body margin;
- IExplorer invece considera il 100% al netto dei margini e ci ritrovavamo con un "pezzetto" scoperto.

Con l' XHTML come vedo il sito è impostato, non abbiamo per la centratura in altezza un equivalente del valign="middle" che si usa con le TABLE, così immediato nell' adattarsi al monitor.
Per la centratura in altezza della foto-DIV si ricorre a un gioco di coordinate top e left date in % percentuale, ed una correzione negativa pari alla metà della dimensione in pixel del DIV.
Lo stesso si può fare per la Larghezza.
Su questo tuttavia non mi dilungo; ti lascio a sperimentazioni isolate di CSS in merito.

**pasticcina** · 27-02-2009, 13:24

Ti ringrazio delle spiegazioni ma non sono riuscita a seguirle.

Invece sono quasi riuscita con lightbox ma solo su firefox, I.E. ha detto "no".

**Straystudios** · 27-02-2009, 16:34

Si parla fondamentalmente di Lightbox versione 1.0 e version 2.0
ma le elaborazioni parallele in giro per il web sono svariate ...
Sarebbe utile tu indicassi da dove hai scaricato i codici; ed allora potrei andare a veder nel dettaglio.
Fare delle ipotesi sul perché del malfunzionamento, porterebbe a dei post più lunghi e meno utili dei miei sopra.

Puoi trovare utili le mie spiegazioni ed esempi in seguito, spero; quando troverai tempo e voglia.
Puoi processare qualcosa velocemete in questo Live-Editor on-line:

http://htmledit.squarefree.com/

Originariamente inviato da pasticcina
.. sai questo è il mio primo e spero non ultimo sito.

Se ti capita un sito che ha necessità di questo per sole due o tre piccole immagini, che fai? Installi tutto il set Lightbox per fare una cosa che un più conciso codice come il mio può fare addirittura meglio? Nota che nel mio esempio, puoi accompagnare la foto anche con una didascalia.

**pasticcina** · 28-02-2009, 01:00

Originariamente inviato da Straystudios
Si parla fondamentalmente di Lightbox versione 1.0 e version 2.0
ma le elaborazioni parallele in giro per il web sono svariate ...
Sarebbe utile tu indicassi da dove hai scaricato i codici; ed allora potrei andare a veder nel dettaglio.
Fare delle ipotesi sul perché del malfunzionamento, porterebbe a dei post più lunghi e meno utili dei miei sopra.

Puoi trovare utili le mie spiegazioni ed esempi in seguito, spero; quando troverai tempo e voglia.
Puoi processare qualcosa velocemete in questo Live-Editor on-line:

http://htmledit.squarefree.com/

Se ti capita un sito che ha necessità di questo per sole due o tre piccole immagini, che fai? Installi tutto il set Lightbox per fare una cosa che un più conciso codice come il mio può fare addirittura meglio? Nota che nel mio esempio, puoi accompagnare la foto anche con una didascalia.

ecco:

http://www.lokeshdhakar.com/projects...box2/#download

Mi interessa anche il tuo esempio, solo che sono talmente digiuna di javascript che è un miracolo che con firefox sia riuscita a far funzionare lightbox.
Ma siccome sono testarda non starò in pace fino a quando non ci riuscirò, grazie anche a te.

PS: il link che hai messo in rosso apre una pagina insignificante, sei sicuro sia giusto?

Discussione: utilizzo lightbox per principiante

Strumenti discussione

Ricerca discussione

Visualizza

utilizzo lightbox per principiante

In principio fu un solo DIV ...

Tre diverse definizioni per OPACITY

function nomeFunzione() {istruzione da eseguire}

Quale Versione di Lightbox ?

Re: Quale Versione di Lightbox ?

Permessi di invio