Utilizzo questa libreria per l'overlay: http://flowplayer.org/tools/overlay/index.html
La pagina dovrebbe fare questo:
1. clic su un link, apertura di un overlay (che chiamo 1 per praticità) con contenuti dinamici
2. nell'overlay 1 c'è un elenco di autori
3. premendo su un autore ottengo la lista dei suoi libri (sovrapponendo un div) e chiamando la lista con json (avevo aperto un 3d in proposito)
Ora il difficile (per me):
4. passando con il mouse sopra il titolo del libro dovrei mostrare la copertina in una zona predefinita dello schermo
5. con un click si dovrebbe aprire un overlay 2 al centro che di fatto non fa altro che mostrare una pagina con una recensione.
Preciso da subito questo:
i punti 1, 2 e 3 li ho implementati e funzionano
il punto 5 funziona solo se parto dal punto 2 (praticamente parto dalla pagina php che si apre nell'overlay 1)
il punto 4 per ora non l'ho considerato proprio, ma se avete qualche idea in tal proposito è ben accetta, mentre congiungere tutto quanto dal punto 1 al punto 5 (anche saltando il 4) è prioritario.
Ecco un po' di codice:
questo è quello della pagina principale:
questo è quello della pagina che apro nell'overlay 1:codice:<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/jquery.tools.min.js"></script> <script> $(function() { // if the function argument is given to overlay, // it is assumed to be the onBeforeLoad event listener $("a[rel]").overlay({ top: 20, mask: 'black', oneInstance: false, speed: 0, onBeforeLoad: function() { // grab wrapper element inside content var wrap = this.getOverlay().find(".contentWrap"); // load the page specified in the trigger wrap.load(this.getTrigger().attr("href")); }, closeOnClick: false }); }); </script> <div class="overlay" id="overlay"> <div class="contentWrap"></div> </div> <div id="page"> Editore </div>
codice:<script> $(function(){ $("a[rel]").overlay({ mask: 'darkred', effect: 'apple', onBeforeLoad: function() { // grab wrapper element inside content var wrap = this.getOverlay().find(".recensione"); // load the page specified in the trigger wrap.load(this.getTrigger().attr("href")); } }); $('#list_dir li').click(function(){ var contenuto_lista = this.id; $.post('json.php', {dir_id: contenuto_lista}, mostra_libri, 'json'); }); }); function mostra_libri(data){ $('#output').append('<ul id="lista">'); $.each(data,function(i,ef){ $('#lista').append('[*]'+ef.lib_title+''); }) $('#primarylist').hide(); $('#output').show(); } </script> <div id="libro" class="apple_overlay"> <div class="riassunto"></div> </div> <div id="output" style="display: block;"> <ul id="lista">[*]Titolo 1[*]Titolo 2[/list] </div> <div id="primarylist" style="display: none;"> <ul id="list_aut"> <li id="1">Autore 1 <li id="2">Autore 2 <li id="3">Autore 3 [/list] </div>

Rispondi quotando