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:
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>
questo è quello della pagina che apro nell'overlay 1:
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>