-
JackGaunt.
User deleted
Script per Immagini in Overlay
Con questo script potrai ingrandire le immagini che vuoi visualizzare, in qualsiasi parte del forum!
[ANTEPRIMA]
Installazione
Amministrazione > Grafica > Colori e StiliSPOILER (clicca per visualizzare)CODICE/* Immagini in Overlay è uno script d'ingrandimento
creato da JackGaunt - vietato rimuovere i credits*/
.overlaying {position:fixed; background:rgba(0, 0, 0, 0.8); width: 0%; height: 0%; opacity: 0; z-index: 1; top: 0%; left: 50%; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s; z-index: -1 !important}
.overlayvis {opacity: 1; padding-top: 10%; width: 100%; height:100%; top: -0%; left: -0%; position: fixed; z-index: 9 !important; background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5); -moz-transition: all 0.5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s}
.overlayvis:before {content:'Pictures Overlay was coded by ©JackGaunt'; position:absolute; font-size: 7pt; bottom: 0; right: 0; color: rgba(255, 255, 255, 0.2)}
.descript {position: static; display: inline-table; line-height: 30px; color: #222; direction: rtl; font-weight: bold; padding: 10px; background: #F9F9F9; border: 1px solid #999; box-shadow: 0 0 30px #000}
.thumb {position:relative; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s; opacity:.75}
.thumb:hover {opacity: 1}
.closure {display: inline; float: right; width: 0; overflow: visible; margin-top: -30px; margin-right: -30px}
.closure a img {position:absolute; -moz-transition: all 0.5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s; -moz-transform: scale(.75); -o-transform: scale(.75); -ms-transform: scale(.75); -webkit-transform: scale(.75); transform: scale(.75)}
.closure a img:hover {-moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1)}
/* FINE IMMAGINI IN OVERLAY */
Amministrazione > Grafica > Codice HTML che sarà mostrato in CIMA a tutte le pagine:SPOILER (clicca per visualizzare)HTML<!--- SCRIPT PER LE IMMAGINI IN OVERLAY - ©JackGaunt --->
<script type="text/javascript">
function display(i) {
document.getElementById('overy'+i).className = "overlayvis" ;
target=document.getElementById('fancy'+i);
target.style.maxHeight=(screen.height*(0.6))+'px';
}
function closure(i) {
document.getElementById('overy'+i).className = "overlaying" ;
}
</script>
<div id="overy1" class="overlaying" onkeypress="return identifyEscKeyPressedEvent(event);">
<div class="descript"><div class="closure"><a href="#" onclick="closure(1)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 1 (non toccare il codice che precede) -->
<img id="fancy1" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 1 (non troppo lunga)-->
immagine quadrata
</div>
</div>
<div id="overy2" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(2)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 2 (non toccare il codice che precede) -->
<img id="fancy2" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 2 (non troppo lunga)-->
immagine lunga
</div>
</div>
<div id="overy3" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(3)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 3 (non toccare il codice che precede) -->
<img id="fancy3" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 3 (non troppo lunga)-->
immagine larga
</div></a>
</div>
<div id="overy4" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(4)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 4 (non toccare il codice che precede)-->
<img id="fancy4" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 4 (non troppo lunga)-->
immagine quadrata
</div>
</div>
<div id="overy5" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(5)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 5 (non toccare il codice che precede)-->
<img id="fancy5" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 5 (non troppo lunga)-->
immagine quadrata</div>
</div>
<!-- PER AGGIUNGERE ALTRE IMMAGINI COPIARE E INCOLLARE DA QUI RIMUOVENDO i caratteri "<!--" iniziali per ogni riga -->
<!-- <div id="overyNUMEROIMMAGINE" class="overlaying">
<!-- <div class="descript"><div class="closure"><a href="#" onclick="closure(NUMEROIMMAGINE)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE NUMEROIMMAGINE (non toccare il codice che precede)-->
<!-- <img id="fancyNUMEROIMMAGINE" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE NUMEROIMMAGINE (non troppo lunga)-->
<!-- immagine quadrata</div>
</div>
<!-- RICORDANDOVI DI MODIFICARE NUMEROIMMAGINE CON IL NUMERO DELL'IMMAGINE CHE STATE AGGIUNGENDO, ad esempio:
<!-- <div id="overy6" class="overlaying">
<!-- <div class="descript"><div class="closure"><a href="#" onclick="closure(6)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 6 (non toccare il codice che precede)-->
<!-- <img id="fancy6" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 6 (non troppo lunga)-->
<!-- immagine quadrata</div>
<!--- FINE SCRIPT PER LE IMMAGINI IN OVERLAY --->
* PER AGGIUNGERE ALTRE IMMAGINI COPIARE E INCOLLARE DA QUI RIMUOVENDO i caratteri "<!--" iniziali per ogni rigaHTML<div id="overyNUMEROIMMAGINE" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(NUMEROIMMAGINE)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE NUMEROIMMAGINE (non toccare il codice che precede)-->
<img id="fancyNUMEROIMMAGINE" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE NUMEROIMMAGINE (non troppo lunga)-->
immagine quadrata
</div></div>
* RICORDANDOVI DI MODIFICARE NUMEROIMMAGINE CON IL NUMERO DELL'IMMAGINE CHE STATE AGGIUNGENDO, ad esempio:HTML<div id="overy6" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(6)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 6 (non toccare il codice che precede)-->
<img id="fancy6" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 6 (non troppo lunga)-->
immagine quadrata</div>
Ammnistrazione > Grafica > Codice HTML che sarà mostrato in CIMA a tutte le pagine
oppure
Ammnistrazione > Grafica > Codice HTML che sarà mostrato in tutte le pagine sotto il logo del sito
oppure
Ammnistrazione > Grafica > Codice HTML che sarà mostrato nella homepage del sito
oppure
Amministrazione > Grafica > Pagine personalizzateSPOILER (clicca per visualizzare)HTML<a href="#" class="thumb" onclick="display(1)">
<img src="http://linkimmagine.png"> </a>
<a href="#" class="thumb" onclick="display(2)">
<img src="http://linkimmagine.png"> </a>
<a href="#" class="thumb" onclick="display(3)">
<img src="http://linkimmagine.png"> </a>
<a href="#" class="thumb" onclick="display(4)">
<img src="http://linkimmagine.png"> </a>
<a href="#" class="thumb" onclick="display(5)">
<img src="http://linkimmagine.png"> </a>
<!-- SE NE INSERITE ULTERIORI, COPIATE E INCOLLATE
<a href="#" class="thumb" onclick="display(NUMEROIMMAGINE)">
<img src="http://linkimmagine.png"> </a>
sostituendo a NUMEROIMMAGINE il numero effettivo, tipo
<a href="#" class="thumb" onclick="display(6)">
<img src="http://linkimmagine.png"> </a>
FINE -->
* SE NE INSERITE ULTERIORI, COPIATE E INCOLLATEHTML<a href="#" class="thumb" onclick="display(NUMEROIMMAGINE)">
<img src="http://linkimmagine.png"> </a>
* sostituendo a NUMEROIMMAGINE il numero effettivo, tipoHTML<a href="#" class="thumb" onclick="display(6)">
<img src="http://linkimmagine.png"> </a>
* Inserimento di Ulteriori immagini
Si consiglia di scegliere opportunamente le dimensioni delle immagini, tendendo conto che quelle che abbiamo inserito nel secondo blocco di codice sono quelle che verranno visualizzate al click (quindi più grandi), quelle che abbiamo inserito nell'ultimo blocco, sono quelle su cui cliccare per vedere l'ingrandimento (quindi più piccole).
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=63500698">Script per Immagini in Overlay</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=4602329">JackGaunt</a>
E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:HTML<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="Script per Immagini in Overlay" href="http://ffmagazine.forumfree.it/?t=63500698"><b>Script per Immagini in Overlay</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=4602329">JackGaunt</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>.
Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>Script per Immagini in Overlay
Realizzata da JackGaunt del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.
Edited by IAL32 - 21/11/2013, 20:38. -
.
Curato in tutti i particolari e funzionante i tutti i browser maggiormente utilizzati e nelle varie risoluzioni.
Complimenti Jack, ottimo lavoro ^^. -
JackGaunt.
User deleted
thank you! . -
*Fifaloverz*.
User deleted
complimenti molto bello!!! . -
.
Come già detto, è molto bello . -
JackGaunt.
User deleted
la particolarità è che utilizzare i Jquery predefiniti come si fa in genere per gli slider, in questo caso crea conflitti di sovrapposizione tra gli oggetti, tanto da non rendere cliccabile nessun link sulla pagina, o da contenere l'immagine in un riquadro (non a schermo intero). . -
S i n b a d.
User deleted
JackGaunt la mia stima nei tuoi confronti aumenta ogni giorno che passa..
Prima le Skin Hematolog e Think Twicee poi gli effetti che hai messo al tuo blog.
. -
TurboGen.
User deleted
Forte come script complimenti . -
.
Bravo Jack (: . -
Antares‚.
User deleted
Ottimo Script complimenti Jack ^^
Sarebbe ancora meglio se non fosse necessario cliccare sull'immagine da ingrandire, ma solo passarci sopra. -
.Ottimo Script complimenti Jack ^^
Sarebbe ancora meglio se non fosse necessario cliccare sull'immagine da ingrandire, ma solo passarci sopra
A questo bastavano poche righe di CSS e in più sarebbe molto scomodo per gli utenti. -
.opera.
User deleted
Complimenti Jack, codice molto curato e molto carino . -
Kiname.
User deleted
Grazie mille ottimo codice ^^ . -
JackGaunt.
User deleted
grazie per i complimenti,
@Antares, se proprio lo vuoi posso farlo, ma mi sembra una pessima idea,
infatti come ti dice anche @bored, basta modificare proprio di poco il codice,
ma è molto scomodo per gli utenti!
ogni volta che passi (anche per caso) su quella immagine ti si apre tutta l'anteprima e poi?
per chiuderlo devi cliccare comunque perchè se no non ci sono condizioni migliori di chiusura.. -
.ogni volta che passi (anche per caso) su quella immagine ti si apre tutta l'anteprima e poi?
per chiuderlo devi cliccare comunque perchè se no non ci sono condizioni migliori di chiusura.
Qui invece che css sarebbe ideale del js: con delle istruzioni onMouseOver e onMouseOut si potrebbe risolvere la faccenda.
Penso comunque che sia nettamente migliore questo appena rilasciato..