Guida alla creazione di thumbnails per post
Versione 2, non compatibile con Internet Explorer
Browser compatibili: 
La seguente versione risulta
non essere compatibile con tutti i browsers, o meglio, con Internet Explorer,ed è una versione con alcune funzionalità in più, infatti questa, consente di creare un pop up al passaggio del mouse sull'anteprima.
Su Internet Explorer lo script non ha alcun effetto, questo solo perchè viene usato l'attributo
max-width che non è supportato dal medesimo browser.
Una volta fatte queste premesse possiamo passare alla procedura.
Come prima cosa, inseriamo in
Gestione HTML > In cima al sito il codice
HTML
<!--[if !IE]>-->
<style type="text/css">
.thumb{position: relative; z-index: 0;background-color:#000 !important;background-image: url(http://img8.imageshack.us/img8/6722/37182090.gif) !important;background: center bottom no-repeat;padding-bottom:11px;line-height:40px }
.thumb:hover{background-color: transparent; z-index: 50}
.thumb span{position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden;}
.thumb span img{border-width: 0; padding: 2px}
.thumb:hover span{ visibility: visible; top: 0; left: 60px}
</style>
<!--<![endif]-->
<!--[if IE]>
<style type="text/css">
.thumb span{display:none}
.thumb:hover span{ visibility: hidden}
</style>
<![endif]-->
Analizziamo il primo codice:
HTML
<!--[if !IE]>-->
<style type="text/css">
.thumb{position: relative; z-index: 0;background-color:#000 !important;background-image: url(http://img8.imageshack.us/img8/6722/37182090.gif) !important;background: center bottom no-repeat;padding-bottom:11px;line-height:40px }
.thumb span{position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden;}
.thumb span img{border-width: 0; padding: 2px}
.thumb:hover span{ visibility: visible; top: 0; left: 60px}
</style>
<!--<![endif]-->
Praticamente indichiamo di applicare lo stile soltanto qualora non si usasse Internet Explorer. Le poche righe di CSS è lo script
CSS pop up image viewer ormai noto.
La parte a seguire
HTML
<!--[if IE]>
<style type="text/css">
.thumb span{display:none}
.thumb:hover span{ visibility: hidden}
</style>
<![endif]-->
Indica di non mostrare il pop up,qualora si usasse Internet Explorer, dal momento che l'immagine inserita è direttamente nelle dimensioni reali.
E' possibile modificare l'immagine con la scritta
THUMBNAIL
,visualizzata nell'anteprima, modificando nella stringa
CODICE
.thumb{position: relative; z-index: 0;background-color:#000 !important;background-image: url(http://img8.imageshack.us/img8/6722/37182090.gif) !important;background: center bottom no-repeat;padding-bottom:11px;line-height:40px }
l'immagine:
http://img8.imageshack.us/img8/6722/37182090.gifoppure rimuoverla completamente usando
CODICE
.thumb{position: relative; z-index: 0}
Queste sono le poche righe di CSS necessarie per creare il pop up, e si consiglia di non modificare il codice, se non si hanno modeste conoscenze.
Passiamo ora al javascript.
Inserire in
Gestione HTML > In fondo al sitoHTML
<script type="text/javascript">
<!--
//Prelevato da NewsBoard Forum
//Autore: 1Dan
if (document.URL.indexOf("?act=Post")!=-1||document.URL.indexOf("?t=")!=-1)
document.REPLIER.IMG.onclick=img_popup;
function img_popup()
{
var DIM="100"; //setta larghezza del thumbnail
var Err="Devi inserire un'url!";
var modalita = confirm("Desideri inserire un'anteprima dell'immagine?");
var URL=prompt("Inserire link dell'immagine","http://");
if(!URL) {alert("Error! "+Err); return;}
if(modalita) {
var popup = confirm("Desideri creare un pop up sull'immagine?");
str='<a class="thumb" target="_blank" href="'+URL+'"><img style="max-width:'+DIM+'px" src="'+URL+'">';
str+= (popup) ? '<span><img alt="" src="'+URL+'"></span>' : '';
str+='</a>';
insert(str,"");
} else {insert("[IMG]"+URL+"[/IMG]","");}
}
//-->
</script>
Anche in questo caso, la funzione viene richiamata dal bottone
IMG che viene sovrascritto.
Lo script è guidato e vi porrà alcune domande al fine di creare il codice opportuno.
Come prima cosa, viene chiesto se si desidera creare un anteprima all'immagine o meno. Nel caso la risposta fosse negativa, verrà utilizzato il classico codice BBCODE per le immagini.In ogni caso comunque si presenta un prompt in cui inserire il
link diretto dell'immagine.
Se si è scelto di creare un anteprima, a questo punto, viene chiesto se creare l'effetto pop up al passaggio del mouse, o avere esclusivamente l'anteprima
100px in larghezza.A seconda delle scelte selezionate potrete avere dei codici diversi:
HTML
[IMG]http://immagine[/IMG]
Se
non si sceglie di creare l'anteprima.
HTML
<a class="thumb" target="_blank" href="http://immagine"><img style="max-width:100px" src="http://immagine"></a>
Se si sceglie di creare l'anteprima, ma
senza l'effetto pop up.
HTML
<a class="thumb" target="_blank" href="http://immagine"><img style="max-width:100px" src="http://immagine"><span><img alt="" src="http://immagine"></span></a>
Se si sceglie di inserire l'anteprima
con popup.
E' possibile modificare nella stringa
HTML
var DIM="100"; //setta larghezza del thumbnail
il valore
100, per variare le dimensioni dell'anteprima.
Nota: Il codice non è altro che un adattamento allo script CSS popup image viewer con un aggiunta di javascript per un inserimento rapido nei post.Guida alla creazione di thumbail per i post è una guida realizzata da
1Dan solo per il
NewsBoard Forum.
E' vietata qualsiasi copia non autorizzata
