Immagini cliccabili nei messaggi, solo per le skin standard mode

« Older   Newer »
  Share  
view post Posted on 25/11/2014, 01:09
Avatar

Staff

Group:
ForumFree Staff
Posts:
48,878

Status:


Attenzione

Questa guida è da utilizzare per i forum in Standard Mode (Nuovo Template)

***


Introduzione


Con l'adozione del template standard è stata introdotta su forumfree, per i forum che utilizzano una skin realizzata per quel template, una funzione di autoridimensionamento delle immagini inserite nei messaggi, questa funzione riduce automaticamente le dimensioni delle immagini che superano la larghezza delle discussioni, impedendo così antiestetici (e fastidiosi) spaginamenti del messaggi.

Questa funzione però non permette a chi legge la discussione di visualizzare, se lo desidera, eventuali grandi immagini inserite nelle loro dimensioni reali, a meno che l'autore del messaggio non abbia avuto l'accortezza di postare anche il link cliccabile dell'immagine, chi volesse visualizzarla in dimensioni reali dovrebbe copiare manualmente, usando il tasto destro del mouse, il link dell'immagine per poi incollarlo in un'altra scheda del suo browser, in modo da aprire l'immagine in quella scheda.

Con lo script pubblicato (in più versioni) in questa guida potete ovviare a questo piccolo inconveniente, consentendovi di inserire automaticamente, utilizzando il tasto IMG del modulo di risposta, le immagini ridimensionate come immagini con link, basterà quindi cliccare sull'immagine postata per far aprire, in una nuova scheda, l'immagine nelle sue dimensioni reali (utilizzando una versione alternativa dello script l'immagine ridimensionata non sarà cliccabile, ma verrà inserito, sopra di essa, il link all'immagine non ridimensionata).


Installazione (Versione 1)


Inserite questo script
HTML
<script type="text/javascript">

if (document.URL.indexOf("?act=Post")!=-1||document.URL.indexOf("?t=")!=-1) document.querySelector('.codebuttons[value*="IMG"]').onclick=img_popup;

function img_popup()
{
var Err="Devi inserire un'url!";
URL=prompt("Inserire link dell'immagine","http://");
if(!URL){alert("Error! "+Err); return;}
tag('<a target="_blank" href="'+URL+'"><img class="color_img" src="'+URL+'"></a>','');
}
</script>

in Amministrazione > Grafica > Codice HTML > Codice HTML che sarà mostrato in FONDO a tutte le pagine, per funzionare lo script non richiede personalizzazioni o modifiche, per la comodità degli amministratori che volessero aggiungere, via CSS, delle personalizzazioni alle immagini postate (bordi, dimensioni massime inferiori a quelle dell'autoridimensionamento, eccetra) all'immagine viene aggiunta una apposita classe utilizzabile in colori e stili, .color_img

Per comodità dell'utenza è invece possibile aggiungere, all'immagine, un testo visualizzabile al passaggio del puntatore, può ad esempio essere utile per evidenziare il fatto che si tratta di una immagine cliccabile, usando il tag title, la parte da modificare è questa
HTML
<img class="color_img" src="'+URL+'">

in questo modo (il testo del title è di esempio, potete sostituirlo con un vostro testo)
HTML
<img class="color_img" src="'+URL+'" title="Clicca per ingrandire">



Installazione (Versione 2)


Utilizzando la prima versione tutte le immagini inserite nei messaggi tramite il tasto IMG saranno immagini cliccabili, se si vuola lasciare anche la possibilità di usufruire del normale BBCode IMG per inserire immagini non cliccabili, va utilizzata la seconda versione dello script, la trovate qui
HTML
<script type="text/javascript">

if (document.URL.indexOf("?act=Post")!=-1||document.URL.indexOf("?t=")!=-1) document.querySelector('.codebuttons[value*="IMG"]').onclick=img_popup;

function img_popup()
{
var Err="Devi inserire un'url!";
var modalita = confirm("Desideri creare una immagine cliccabile?");
URL=prompt("Inserire link dell'immagine","http://");
if(!URL){alert("Error! "+Err); return;}
if(modalita) {

tag('<a target="_blank" href="'+URL+'"><img class="color_img" src="'+URL+'"></a>','');

}else {

tag("[IMG]"+URL+"[/IMG]","");

}
}
</script>

con questo script (da inserire sempre in Codice HTML che sarà mostrato in FONDO a tutte le pagine) cliccando sul tasto IMG, utente visualizzerà una finestra di scelta a due pulsanti, Desideri creare una immagine cliccabile?, cliccando sul pulsante si verrà inserito, dallo script, lo stesso codice della prima versione (personalizzabile nello stesso modo, via CSS usando la classe .color_img e/o aggiungendo un title), col pulsante no verrà invece utilizzato il normale BBCode per l'inserimento delle immagini, quindi l'immagine postata non sarà cliccabile (cosa non necessaria, per le immagini di piccole dimensioni).


Installazione (Versione 3)


Con la terza versione dello script il problema viene affrontato con un diverso approccio, non vengono più inserite immagini cliccabili direttamente, ma per ogni immagine viene inserito, posizionato sopra all'immagine, il link diretto che consente di visualizzarla nelle sue dimensioni reali, lo script, sempre da posizionare nel box Codice HTML che sarà mostrato in FONDO a tutte le pagine, è questo
HTML
<script type="text/javascript">

if (document.URL.indexOf("?act=Post")!=-1||document.URL.indexOf("?t=")!=-1) document.querySelector('.codebuttons[value*="IMG"]').onclick=img_popup;

function img_popup()
{
var Err="Devi inserire un'url!";
URL=prompt("Inserire link dell'immagine","http://");
if(!URL){alert("Error! "+Err); return;}
tag('<span style="display: inline-block"><a target="_blank" href="'+URL+'" style="font-size: 8pt; line-height: 100%;">Vai all\'immagine</a><br>[IMG]'+URL+'[/IMG]</span>','');
}
</script>

con questo script l'immagine (non cliccabile) viene inserita col normale tag BBCode per le immagini, sopra di essa, allineato al bordo sinistro, verrà inserito il link testuale, che costituisce la parte personalizzabile dello script.

Di default viene inserito con lo stesso colore e tipo di font previsto, dalla skin del forum, per i link nei messaggi, e con una dimensione pari a quella ottenibile col BBCode Size=1, per modificare le dimensioni dovete agire su questo stile in linea, style="font-size: 8pt; line-height: 100%;", aumentando il valore di font-size, potete anche eliminare lo stile in linea sostituendolo con una apposita classe da aggiungere in colori e stili, questo vi consentirà una completa personalizzazione, via CSS, del link.

Per modificare l'allineamento del link rispetto all'immagine, la parte da modificare è questa
HTML
'<span style="display: inline-block">

aggiungendo allo stile l'attributo text-align, come in questo esempio
HTML
'<span style="display: inline-block; text-align:center">

in questo modo sarà centrato rispetto all'immagine, per avere il link allineato a destra sostituite center con right, l'ultima parte personalizzabile è il testo del link
HTML
<a target="_blank" href="'+URL+'" style="font-size: 8pt; line-height: 100%;">Vai all\'immagine</a>

sostituite Vai all\'immagine con un testo di vostra scelta (eventuali apostrofi o apici vanno preceduti da un backslash, come nell'esempio), opzionalmente potete anche spostare il link sotto all'immagine, in questo modo
HTML
[IMG]'+URL+'[/IMG]<br><a target="_blank" href="'+URL+'" style="font-size: 8pt; line-height: 100%;">Vai all\'immagine</a>

soluzione però che lo renderebbe meno visibile.


Installazione (Versione 4)


La quarta e ultima versione dello script, questa
HTML
<script type="text/javascript">

if (document.URL.indexOf("?act=Post")!=-1||document.URL.indexOf("?t=")!=-1) document.querySelector('.codebuttons[value*="IMG"]').onclick=img_popup;

function img_popup()
{
var Err="Devi inserire un'url!";
var modalita = confirm("Desideri creare una immagine con link?");
URL=prompt("Inserire link dell'immagine","http://");
if(!URL){alert("Error! "+Err); return;}
if(modalita) {

tag('<span style="display: inline-block"><a target="_blank" href="'+URL+'" style="font-size: 8pt; line-height: 100%;">Vai all\'immagine</a><br>[IMG]'+URL+'[/IMG]</span>','');

}else {

tag("[IMG]"+URL+"[/IMG]","");

}
}
</script>

utilizza lo stesso meccanismo della terza, l'immagine con link cliccabile, e consente le stesse personalizzazioni, in aggiunta dà la possibilità (come la seconda versione) di scegliere, tramite una finesta di scelta a due pulsanti, se inserire l'immagine col link (opzione Sì) o una normale immagine senza link aggiuntivo (opzione No).


Per dubbi/chiarimenti/supporto utilizzare la sezione Supporto Script.
 
Top
0 replies since 25/11/2014, 01:09   954 views
  Share