Lightbox con pagina caricata con ajax

[semolino]

Ho letto e riletto parecchi post, con diverse soluzioni che riguardano l'interpretazione del javascript dopo aver caricato un contenuto in un div.
Ho provato anche un esempio di cui parlava un nostro utente utilizzando una funzione "execJS", ma ancora niente.

Proviamo a fare un esempio.
Io utilizzo

function caricaTesto(nomeFile) {

  // variabili di funzione
  var
    // assegnazione oggetto XMLHttpRequest
    ajax = assegnaXMLHttpRequest(),
    // assegnazione elemento del documento
    elemento = prendiElementoDaId("box"),
    // risultato booleano di funzione
    usaLink = true;
  
  // se l'oggetto XMLHttpRequest non è nullo
  if(ajax) {
    // il link al file non deve essere usato
    usaLink = false;

    // impostazione richiesta asincrona in GET
    // del file specificato
    ajax.open("get", nomeFile, true);

    // rimozione dell'header "connection" come "keep alive"
    ajax.setRequestHeader("connection", "close");

    // impostazione controllo e stato della richiesta
    ajax.onreadystatechange = function() {
      
      // verifica dello stato
      if(ajax.readyState === readyState.COMPLETATO) {
        // verifica della risposta da parte del server
        if(statusText[ajax.status] === "OK")
          // operazione avvenuta con successo
          elemento.innerHTML = ajax.responseText;
        else {
          // errore di caricamento
          elemento.innerHTML = "Impossibile effettuare l'operazione richiesta.
";
          elemento.innerHTML += "Errore riscontrato: " + statusText[ajax.status];
        }
      }
    }

    // invio richiesta
    ajax.send(null);
  }
   
  return usaLink;
} 

per caricare la pagina nel div specifico.
una volta nel div dovrei includere il file lightbox.js che viene utilizzato dal link con istruzione rel="lightbox()".

Ovviamente cosi com'è non parte la laightbox ma l'immagine viene caricata in una pagina bianca nuova.

Per i moderatori: può essere scopo di un 'tutorial', se sefguito passo passo, magari...

Buon natale a tutti!!

[Mega69]

Devi fare una cosa del genere:

document.onclick = function(e) {
  var e = e || window.event,
       obj = e.target || e.srcElement;
  if(obj.getAttribute("rel") == "lightbox" && !obj.onclick) {
     myLightbox.start(obj);
     return false;
  }
}

Non ho fatto prove ma spero funzioni

[semolino]

Grazie per la prontezza, ma questo a cosa/dove lo applico?
Lo devo includere nella pagina php da caricare?

[Mega69]

No, nell'head della pagina principale.

[semolino]

purtroppo non funziona ancora, cosa posso fare per tentare altre strade?

Grazie

[Mega69]

Prova così:

document.onclick = function(e) {
  var e = e || window.event,
       obj = e.target || e.srcElement;
  if(obj.getAttribute("rel").indexOf("lightbox") != -1 && !obj.onclick) {
     myLightbox.start(obj);
     return false;
  }
}

Se non funziona metti un alert dentro l'if per vedere se quel blocco viene eseguito.

[semolino]

Grazie, ti faccio sapere… scusa la lentezza ma dove sono ora non ho una connessione internet e faccio un po fatica a collegarmi...
a giorni tornerò online!!

Grazie, lo provo e ti dico

[bulmachan]

Non so se possa esserti di aiuto, ho avuto un problema simile al tuo nel funzionamento di Lightbox con pagina caricata con ajax.
Nel mio caso, una galleria di immagini, ho un menu laterale con dei thumbnail (dei particolare di ogni immagine), cliccando su ognuno, a destra compare (sfruttando Ajax.Updater - libreria prototype.js) l'immagine intera, a questo punto cliccando sull'immagine appena apparsa dovrebbe apparire nuovamente l'immagine con la libreria lightbox e come a te, mi compariva l'immagine in una pagina bianca nuova (come se aprissi la .jpg col browser)

Queste solo le librerie incluse (lightbox 2.0)

<script src="scriptaculous/prototype.js"></script>
<script src="scriptaculous/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="scriptaculous/lightbox.js" type="text/javascript"></script> 

Questo è il javascript grazie al quale cliccando su un thumbnail del menu', compare poi a destra l'immagine completa. Ho fatto questa scelta così che le immagini thumbnail non vengano ricaricate ogni volta che si vuole visualizzare sulla destra un'immagine diversa.

function viewOpera(id){
var myAjax = new  Ajax.Updater( "posts", "viewOpera.php?id="+id, { method: 'get', evalScripts:true});
} 

Questo e' come si presenta il menu' con i thumbnail

[url="javascript:void(null)"][img]opere/thumb-pippo.jpg[/img][/url] 

Nello script "viewOpera.php" (che viene correttamente richiamato) credevo di poter richiamare la libreria lightbox scrivendo

[url="opere/big-pippo.jpg"] [img]opere/pippo.jpg[/img][/url] 

Che va invece sostiuito con

<a href="opere/big-pippo.jpg" rel="lightbox[pippo]" onclick="myLightbox.start(this); return false;" title=""> [img]opere/pippo.jpg[/img] 

Non so se si possa applicare anche al tuo caso, però dove nel contenuto del div richiami come nell'esempio
lightbox 2.0 <a href=... etc> io proverei ad aggiungere onclick="myLightbox.start(this); return false;".

[semolino]

GUARDA sei stato assolutamente di grande aiuto!!! non so come ringraziarti e spero che sia di aiuto a tutti gli altri utenti!!!
Funziona alla grande!!!


OT - Un'altra cosa: posso allo stesso modo simulare un body onload quando carico la medesima pagina?

Grazie ancora infinitamente