galleria di immagini lightbox2

[lupo92]

ciao ho scaricato, per realizzwre una galleria di immagini, questa serie di script da questo sito:
http://www.lokeshdhakar.com/projects/lightbox2/.
Vorrei delle spiegazioni sul funzionamento.
Mi spiego:
Vorre cambiare la grafica, ad esempio i tasti next e prev vorrei posizionarli in un altro posto, e così vale per le altre cose.
Se qualcuno mi può indirizzare su come fare ne sarei grato.
Ciao

[artorius]

beh, modificando (o meglio sovrascrivendo) le regole di CSS di lightbox.

Nel file CSS lightbox.css hai le seguenti regole:

#nextLink:hover, #nextLink:visited:hover { lightbox.css (riga 17)
background:transparent url(../images/nextlabel.gif) no-repeat scroll right 15%;
}
#hoverNav a { lightbox.css (riga 11)
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}
#nextLink { lightbox.css (riga 15)
float:right;
right:0;
}
#prevLink, #nextLink { lightbox.css (riga 13)
background-image:url(data:image/gif;
display:block;
height:100%;
width:49%;
}
a, .contact-link { screen.css (riga 89)
color:#8AD459;
text-decoration:none;
}

Che vengono applicate al link next del lightbox. Tu devi "sovrascriverle", cioé inserire nel CSS della tua pagina (o nella pagina stessa) delle regole più pesanti (di meggior valore) che vadano a sovrascrivere le parti che non ti interessano. Tieni sempre presente, che lo script di lightbox imposterà l'altezza del tag a = all'altezza dell'immagine e questa regola non la puoi sovrascrivere perché è nello style dell'elemento.

Ti consiglio di usare:

div#nextLink {

}

che è più pesante della prima, della terza, della quarta e della quinta regola (non della seconda, ma mi sembra che imposti i valori più o meno a default, quindi non dovrebbe dare problemi)

Sullo stile, se vuoi mettere il bottone da qualcha altra parte devi mettergli position: absolute e togliergli il float, poi usare top e left.

Lo stesso discorso per il tasto prev e per la grafica: è solo CSS.

[Pastore12]

Come non detto..

[lupo92]

scusate il ritardo ho avuto problemi di ADSL.
Ringrazio artorius per la spiegazione ma non riesco a fare quello che vorrei. Cioè mettere sulla sinistra in basso PREV al centro EXIT e sulla destra NEXT come da file allegato.
Se posso ancora approfittare della vostra gentilezza

[felice211]

[artorius]

prova ad aggiungere questo CSS:

a#nextLink, a#prevLink {            
    margin-top:70px;
    position:absolute;
}
        
a#nextLink:hover, a#nextLink:visited:hover
{
    background-position:right bottom;
}
        
a#prevLink:hover, a#prevLink:visited:hover
{
    background-position:left bottom;
}
        
#imageData div#imageDetails{
    width : 100%;
}
        
#imageData span#numberDisplay
{
    text-align:center;
}
        
div#bottomNav #bottomNavClose{
    width : 100%;
} 

Considera che se metti una caption non funzionerà

[lupo92]

grazie.
una ultima cosa se non rompo, sevolessi vedere i tasti prev e next anche senza il passaggio del mouse? Cioè fare in modo di vederli anche quando il mouse e posizionato altrove.
grazie
ciao

[artorius]

questo non puoi farlo senza cambiare Javascript di lightbox, non so se ti conviene metterci le mani...

[lupo92]

metterci le mani io? assolutamente no.
pensavo fosse possibile mettere delle img prev e next che poi venivano sovrapposte dai veri prev e next, ma non so come fare.
cmq ciao e grazie

[artorius]

ennò, il problema è che la visibilità del link (per intenderci, il display) viene settato tramite JS al passaggio del mouse, quindi anche se cambiassi le immagini verrebbero sempre viste solo al passaggio del mouse.