[Risolto] libreria lightbox

bulma

[Risolto] libreria lightbox

Salve a tutti... volevo sapere se qualcuno ha riscontrato il mio stesso problema nell'uso della libreria lightbox2: se l'immagine in thumbnail non è nel codice html, ma viene mostrata solo cliccando su un link che richiama codice javascript, mi appare l'immagine ingrandita appare come se stessi cliccando su un link aprendo la foto nel browser e non con l'effetto grafico della libreria.


<html>
<head>
<title>Prova -  Pippo</title>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

<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>

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

function pippo(){
    var e = document.getElementById("prova");
    e.innerHTML = '<a href="opere/pippo.jpg" rel="lightbox[pippo]" title=""> <img src="opere/pippo_big.jpg"></a>';
}

</script>
</head> 
<body id="prova">
<a href="javascript:void(null)" onclick="pippo()" title="">mostra pippo</a>
</body>
</html>

```Sapreste dirmi dove sbaglio? :sherlock:

thedarkita

La funzione pippo è inutile tu devi fare cosi:

<a href="immagine-da-aprire" rel="lightbox" title="Descrizione">
<img src="immagine-iniziale">
</a>

bulma

Lo so che con <a href... direttamente nell'html funziona...
Io però ho bisogno che l'immagine in thumbnail non sia presente nella pagina, ma venga mostrata solo se si clicca ad esempio su un bottone, è proprio per questo che metto <a href... nel javascript (un po' come nel primo esempio di "spaghetti ajax", solo che invece di "Benone" a me appare appunto l'immagine-iniziale).
Se però faccio così quando il thumbnail viene mostrato e ci si clicca nuovamente sopra non appare l'effetto grafico della libreria.
Avrei bisogno di capire se sono io che sbaglio o se la libreria in tal caso non da l'effetto sperato. :inso:

claudioweb

Ciao

Puoi inserire l'immagine piccola in un div nascosto che compare solo quando si clicca.
In questo modo il javascript gestisce solo la visibilità del div.

bulma

Effettivamente così funziona ;), ma mi chiedo però perché con l'altro metodo non vada.
Speravo infatti che risolto l'esempio che ho proposto mi fosse più semplice venire a capo di un caso più generale: in sostanza sto gestendo tramite php e mysql una galleria fotografica.

Da un lato ho un menu' contenete diversi thumbnail (particolari delle varie immagini), cliccando su uno di essi, nella destra della pagina compare per intero l'immagine scelta (e questo funziona). A questo punto cliccando nuovamente sull'immagine intera appena comparsa vorrei "partisse" l'effetto della libreria lightbox, e invece (così come nel caso inizialmente presentato) mi viene mostrata l'immagine jpg come se la stessi aprendo con il browser.

Questo è il javscript 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, generato da in php estrapolando i dati da un database.*


* Nell'esempio inzialmente proposto cercavo di "isolare" questo passaggio essendomi accorta durante varie prove che nemmeno

function pippo(){
var e = document.getElementById("prova");
e.innerHTML = '<a href="opere/pippo.jpg" rel="lightbox[pippo]" title=""> <img src="opere/pippo_big.jpg"></a>';
}


Avete qualche consiglio da darmi? Puo' essere che io mi stia perdendo in un bicchier d'acqua e possa ottenere lo stesso risultato in altro modo. :030:
Grazie!!!

bulma

Un po' come Marzullo: fatti una domanda e datti una risposta, dopo lunga e penosa ricerca ho trovato la soluzione.

*E sufficiente sostituire in ** "viewOpera.php"
*```
<a href="opere/big-pippo.jpg" rel="lightbox[pippo]" title=""> <img src="opere/pippo.jpg"></a

Con
*```

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

```Ovviamente nel mio caso si tratta di una porzione di codice estratta con una SELECT dal database.

PS: Come faccio a cambiare il titolo del post per indicare "risolto"?

claudioweb

Stavo leggendo proprio ora la tua prima replica... ma ora vedo che hai risolto
@bulma said:

PS: Come faccio a cambiare il titolo del post per indicare "risolto"?
Fatto

Ciao