-
.Lightbox nelle discussioni
Ingrandimento di immagini all'interno di un lightbox pensato per le discussioni
[ANTEPRIMA]
Dopo il Lightbox per immagini, come promesso, abbiamo sviluppato un sistema per poterlo utilizzare all'interno delle discussioni, il tutto in modo automatico, con possibilità di scegliere tra le immagini normali e le immagini destinate al lightbox.
Installazione
L'installazione è molto semplice, basterà copiare ed incollare il codice per avere lo script già pronto per l'uso.
In Amministrazione > Codice HTML > Codice HTML che sarà mostrato in FONDO a tutte le pagine:CODICE<!--
// ===================================
// Lightbox nelle discussioni (compatibile con Forumfree)
// Realizzato da _Lati_
// (C) 2012 http://ffmagazine.forumfree.it/
// Versione 1
// =================================== -->
<div id="lightbox">
<div id="light_back"></div>
<div id="lightc">
<div id="light_win">
<div id="img">
<div id="back" onClick="light_back()"></div>
<div><img id="img_box" src="" /></div>
<div id="next" onClick="light_next()"></div>
</div>
<div id="light_button"><a href ="" target="_blank" id="open_image">Apri nel browser</a><a href="javascript:void(0)" id="light_close" onclick="light_close()">X CHIUDI</a></div>
</div>
</div>
</div>
<script type="text/javascript" src="http://scripts.ffmagazine.net/lightbox.js"></script>
In Amministrazione > Colori e stili:CODICE/* LIGHTBOX DISCUSSIONI - http://ffmagazine.forumfree.it/?t=64497259 */
.light {transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease; max-width: 150px; padding: 7px; margin: 6px; background: #EEE; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, .5)}
.light:hover {cursor: pointer; background: #DED76E}
#lightbox {display: table; position: fixed; top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; opacity: 0}
#lightbox.lopen {visibility: visible; opacity: 1; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
#lightbox.lclose {visibility: hidden; opacity: 0; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
#light_back {position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .5)}
#lightc {display: table-cell; vertical-align: middle; position: relative}
#light_win {display: table; padding: 10px; background: #FFF; box-shadow: 0 0 15px rgba(0, 0, 0, .5); margin: auto; z-index: 9}
#light_close, #open_image {font-weight: bold; margin-top: 7px; font-size: 16px; color: #AAA; font-family: helvetica}
#light_close:hover, #open_image:hover {cursor: pointer; border: 0; text-decoration: none}
#light_close {float: right}
#open_image {float: left}
#light_button {margin-top: 7px; display: block}
#img_box {margin: auto; max-height: 400px; max-width: 600px}
#img {position: relative}
#back, #next {background: rgba(0, 0, 0, .5); width: 50px; height: 100%; display: table-cell; position: absolute; top: 0; opacity: 0; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
#back:hover, #next:hover {cursor: pointer}
#next {right: 0; background-image: url(http://dumpshare.net/images/193next.png); background-repeat: no-repeat; background-position: center}
#back {background-image: url(http://dumpshare.net/images/870back.png); background-repeat: no-repeat; background-position: center}
#img:hover #back, #img:hover #next {opacity: 1; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
.fast.send .codebuttons:last-child {margin-left: 4px}
Per chi vuole personalizzare ogni parte del Lightbox può utilizzare questo css commentato, in modo da comprendere quali sono le parti da modificare (consiglio di non modificare le parti non commentate):SPOILER (clicca per visualizzare)CODICE/* LIGHTBOX DISCUSSIONI - http://ffmagazine.forumfree.it/?t=64497259 */
/* Dimensione massima delle miniature, bordo e transizione animata */
.light {transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease; max-width: 150px; padding: 7px; margin: 6px; background: #EEE; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, .5)}
/* Cambio colore del bordo della miniatura e cambio del cursore al passaggio del mouse */
.light:hover {cursor: pointer; background: #DED76E}
#lightbox {display: table; position: fixed; top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; opacity: 0}
#lightbox.lopen {visibility: visible; opacity: 1; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
#lightbox.lclose {visibility: hidden; opacity: 0; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
/* Colore di sfondo, coprirà l'intera pagina */
#light_back {position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .5)}
#lightc {display: table-cell; vertical-align: middle; position: relative}
/* Stile del box dove verrà mostrata l'immagine */
#light_win {display: table; padding: 10px; background: #FFF; box-shadow: 0 0 15px rgba(0, 0, 0, .5); margin: auto; z-index: 9}
/* Stile scritte Apri nel browser e X Chiudi */
#light_close, #open_image {font-weight: bold; margin-top: 7px; font-size: 16px; color: #AAA; font-family: helvetica}
/* Cambio cursore e tolgo il bordo di Apri nel browser e X Chiudi al passaggio del mouse */
#light_close:hover, #open_image:hover {cursor: pointer; border: 0; text-decoration: none}
#light_close {float: right}
#open_image {float: left}
#light_button {margin-top: 7px; display: block}
/* Dimensione massima delle immagini mostrate nel box, ora impostato al minimo così da visualizzarlo anche su risoluzioni molto basse */
#img_box {margin: auto; max-height: 400px; max-width: 600px}
#img {position: relative}
/* Stile dello sfondo dei bottoni per andare avanti e indietro con le immagini */
#back, #next {background: rgba(0, 0, 0, .5); width: 50px; height: 100%; display: table-cell; position: absolute; top: 0; opacity: 0; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
/* Cambio il cursore al passaggio dei bottoni per cambiare immagine */
#back:hover, #next:hover {cursor: pointer}
/* Stile del bottone per andare all'immagine successiva */
#next {right: 0; background-image: url(http://dumpshare.net/images/193next.png); background-repeat: no-repeat; background-position: center}
/* Stile del bottone per andare all'immagine precedente */
#back {background-image: url(http://dumpshare.net/images/870back.png); background-repeat: no-repeat; background-position: center}
#img:hover #back, #img:hover #next {opacity: 1; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
/* Aggiungo una leggera spaziatura per il bottone nell'invio rapido */
.fast.send .codebuttons:last-child {margin-left: 4px}
Informazioni
Lo script è compatibile con la gran parte dei browser più recenti tranne Internet Explorer, ragion per cui chi possiede questo browser non visualizzerà il box. Lo script è completamente automatico, basterà infatti utilizzare il bottone "Lightbox" quando si crea una nuova discussione o si risponde ed inserire l'url dell'immagine nel campo apposito. Lo script è compatibile con entrambi i layout.
Credits
Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):HTML<a href="http://ffmagazine.forumfree.it/?t=64497259">Lightbox nelle discussioni</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=3347616">_Lati_</a>Lightbox nelle discussioni
Realizzata da _Lati_ del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0..
