-
JackGaunt.
User deleted
Anteprima
Con questo script potrai ingrandire le immagini che vuoi
visualizzare, in qualsiasi parte del forum!
(e non per forza solo le immagini)
Potrai creare intere gallery e finalmente non inserire più
i noiosi link diretti per visualizzare l'immagine,
ma la visualizzi sul tuo forum tranquillamente!
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: 80%; 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=""> <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=""> <br>
<!-- DESCRIZIONE 6 (non troppo lunga)-->
<!-- immagine quadrata</div>
<!--- FINE SCRIPT PER LE IMMAGINI IN OVERLAY --->
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 -->
codice interamente creato da JackGaunt.
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).
!Importante : Aggiungere nei credits
Pictures Overlay coded by ©JackGauntCODICE<a href="http://jacksnotes.blogfree.net/?t=4265695">Pictures Overlay</a> coded by <a href="http://jacksnotes.blogfree.net/">©JackGaunt</a>INDICATE CORTESEMENTE I NOMI E LINK DEI FORUM SU CUI APPLICATE IL CODICE!
codice prelevato da:
Edited by JackGaunt - 5/10/2012, 22:43
. -
Mikysimpa.
User deleted
Un codice fantastico *w*! Lo userò sicuramente nel mio portfolio, appena facciamo la nuova skin 
. -
Zephyr.
User deleted
Codice splendido, che fa al caso mio per un'idea: una sorta di mini-galleria con le varie città del mondo del mio Gdr. Lo provo un attimo in una sezione privata, e appena lo aggiungo ufficialmente te lo faccio sapere qui. =)
Complimenti, come al solito.
Aggiornamento: dovrei usarlo in una singola sezione, lo script. Inserendolo in una pagina, però, non sembra funzionare. <== NB: Sono una capra e sono le tre, 99% ho sbagliato qualcosa io. Sapresti aiutarmi?
Edited by Zephyr - 13/12/2012, 03:11. -
JackGaunt.
User deleted
certo, se mi linki la pagina ^^ . -
Zephyr.
User deleted
http://angeldust.forumfree.it/?pag=overlay
Eccola. L'idea è di fare in modo da avere una galleria con alcune immagini/descrizioni; ho visto che mi funziona se lo metto in html per tutte le sezioni, ma non se lo inserisco in una pagine.
Grazie in anticipo per l'aiuto. ( Per ora la galleria è in una sezione nascosta, ma se hai bisogno di vedere il risultato provvisorio, lo posto sul mio forum di prova in una sezione aperta. :3 )
Nello spoiler ho inserito il codice usato. Magari sono idiota io e non funziona perché non ho ancora messo tutte le immagini. X°DSPOILER (clicca per visualizzare)CODICECODICE NELLA PAGINA:
<a href="#platina" class="thumb" onclick="display(1)">
<img src="http://digilander.libero.it/lordzephyr/Platina,%20la%20Prima%20Capitale.jpg"> </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 -->
CODICE NELLA SEZIONE:
<!--- 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="platina" src="http://digilander.libero.it/lordzephyr/Platina,%20la%20Prima%20Capitale.jpg"> <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=""> <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=""> <br>
<!-- DESCRIZIONE 6 (non troppo lunga)-->
<!-- immagine quadrata</div>
<!--- FINE SCRIPT PER LE IMMAGINI IN OVERLAY --->. -
JackGaunt.
User deleted
potresti metterlo nel forum di prova? . -
Zephyr.
User deleted
http://skinadaprova.forumfree.it/?f=10562607 <=== Messo in questa sezione. =)
Edit: Ho provato a giocarci un po' su un altro forum di prova. In Homepage funziona alla perfezione, purtroppo però non saprei come fare in modo che mi compaia la "galleria" solo in una sezione.
Edited by Zephyr - 13/12/2012, 21:47. -
JackGaunt.
User deleted
se potessi mettermi admin (nel forum di prova) faremmo prima 
. -
Zephyr.
User deleted
Oggi l'idiozia è forte in me. Fatto, perdonami. X°D . -
JackGaunt.
User deleted
cacchio ma non funziona sopra alle sezioni, perchè ForumFree ha i filtri per le funzioni JavaScript! mi dispiace, puoi metterlo solo nelle pagine personalizzate!
Sottolineerei che quando ho creato lo script era possibile, ora non più.. -
Zephyr.
User deleted
Azz, peccato.
Grazie comunque, e scusa per il disturbo. =).
Immagini in Overlay |
