Guide & Informazioni

Se sei già cliente di SoluzioneSito alcune sezioni e guide sono disponibili per facilitare il tuo lavoro e guidarti nelle operazioni più comuni di aggiornamento e mantenimento del tuo sito. I link a seguire offrono un accesso diretto a queste sezioni:

Nel caso in cui non avessi individuato la risposta alla tua richiesta contatta lo staff di SoluzioneSito o il tuo commerciale di riferimento esponendo nel modo più dettagliato possibile il tuo problema.

Funzioni di ingrandimento JS delle immagini

Può risultare utile in fase di creazione o modifica delle pagine del proprio sito inserire immagini di dimensione consistente per poter rendere più visibili determinati contenuti o fornire informazioni aggiuntive rispetto a quelle che normalmente possono essere mostrate all'interno di un'immagine inserita direttamente nel flusso testuale di una pagina, costretta nell'ambito della grafica del sito. La funzione di ingrandimento JavaScript presente nei siti di SoluzioneSito permette di creare effetti per i quali cliccando sopra ad un'immagine o un link testuale venga mostrata, con un'animazione, un'immagine più grande o più dettagliata. Un esempio di ingrandimento è mostrato a seguire, prima a partire da un'immagine e poi da un link:

Link di esempio numero 3                       Link di esempio numero 4

Visualizzando l'ingrandimento di un'immagine è possibile spostarsi verso la precedente o successiva usando le frecce nell'angolo in basso a sinistra del riquadro oppure le frecce destra e sinistra della tastiera. È inoltre possibile spostarsi all'immagine successiva cliccando sull'immagine mostrata e uscire dall'ingrandimento premendo il tasto chiudi in basso a destra, il tasto ESC della tastiera o cliccando fuori dall'immagine. La posizione delle frecce, del tasto di chiusura e le combinazioni di tasti illustrate possono variare a seconda del tipo di ingrandimento attivo sul sito tra quelli disponibili, le modalità indicate sono riferite alla tipologia attiva sul nostro sito in questo momento. Le immagini di una stessa pagina che presentano versioni ingrandite si legano automaticamente tra di loro permettendo lo spostamento diretto tra le immagini.

 

Come implementare l'ingrandimento

L'implementazione della funzione di ingrandimento è molto semplice, è sufficiente compiere solo poche operazioni aggiuntive rispetto a quelle normalmente svolte per inserire un'immagine. La procedura illustrata è indicativa, pur essendo quella ritenuta più rapida e meno onerosa da applicare, può essere personalizzata a condizione di mantenere invariata la struttura di base dell'operazione:

  1. creare due immagini, una piccola da inserire nella pagina e una più grande che rappresenterà la versione ingrandita. Consigliamo di individuare uno standard, ad esempio se si sta creando un'immagine JPG di un koala attribuire alla versione piccola dell'immagine il nome koala_tn.jpg e a quella grande il nome koala_lg.jpg. I suffissi _tn e _lg rappresentano abbreviazioni dei termini thumbnail (miniatura) e large (ingrandimento) - vedi immagine di esempio
  2. caricare le due immagini in contemporanea tramite la procedura di upload all'interno dell'editor della pagina su cui si sta intervenendo. Nel nostro esempio le immagini saranno usate per una news per cui è stata creata una cartella denominata "news" per contenenerle - vedi immagine di esempio
  3. inserire nel testo l'immagine piccola (koala_tn.jpg nel nostro esempio)
  4. cliccare sopra all'immagine piccola inserita e successivamente sul tasto per la creazione dei collegamenti (Inserisci/gestisci collegamenti ipertestuali) - vedi immagine di esempio
  5. inserire nei campi a seguire gli elementi indicati - vedi immagine di esempio 
    1. URL: il percorso dell'immagine grande secondo il seguente schema (togliere l'http:// eventualmente presente nella casella di testo):

      upload/images/eventuale_cartella/nome_immagine_lg.jpg

      che nell'esempio di questa guida essendo l'immagine grande da noi caricata contenuta nella cartella "news" diventa:

      upload/images/news/koala_lg.jpg

    2. Tooltip: il testo che si vuole compaia come didascalia sotto all'immagine ingrandita e al soffermarsi del mouse sopra all'immagine piccola (non obbligatorio)
    3. Classe CSS: scegliere la voce "js_zoom"
  6. Premere il tasto OK e salvare la pagina verificando sul sito dopo alcuni secondi il risultato ottenuto

Per l'inserimento dell'ingrandimento su un testo è necessario caricare la sola immagine ingrandita senza inserirla nella pagina, creare il collegamento sopra al testo inserendo come URL quello dell'immagine. 

ATTENZIONE: l'utilizzo di questa funzione implica il caricamento di una seconda immagine rispetto a quella originale. Questa immagine, più grande della prima, avrà di conseguenza un peso superiore e genererà un consumo di traffico mensile maggiore. È molto importante creare quindi immagini ottimizzate secondo le specifiche indicate nell'apposita guida del nostro sito. Nel creare le immagini ingrandite è necessario tenere in considerazione che la dimensione media di uno schermo è pari a 1024x768 pixel e questa è in parte occupata dall'interfaccia browser, dalle barre e altri elementi. L'immagine ingrandita deve quindi avere dimensioni adatte a poter essere visualizzata per intero.

 

Note generali relative alla funzione

Il servizio così come descritto non è disponibile su tutti i siti di SoluzioneSito a causa di possibili conflitti tecnici con altri componenti o limitazioni di legge. È possibile verificare se il proprio sito dispone della funzionalità di ingrandimento all'interno del modulo "Opzioni Generali" alla voce "Zoom JS". L'impostazione non è autonomamente modificabile, in caso di opzione disattivata è possibile richiederne l'attivazione inviando un ticket di supporto. Lo staff di SoluzioneSito verificherà la fattibilità tecnica dell'attivazione e, in assenza di conflitti, procederà in tal senso con addebito di un ticket per l'intervento. È necessario tenere in considerazione le seguenti annotazioni:

  • la funzionalità non è considerabile accessibile secondo i dettami della Legge 4 del 9 gennaio 2004, pubblicata nella Gazzetta Ufficiale il 17 gennaio 2004 (Legge Stanca) per cui l'opzione è di default disattivata sui siti della PA.
  • pur se disponibile la funzionalità può presentare piccole incompatibilità con altri elementi della pagina specialmente se utilizzata negli intro e footer dei moduli, ad esempio se attivata nei testi di appoggio del modulo video in alcune posizioni può generare un'errore di visualizzazione nella sovrapposizione tra video e immagine ingrandita. L'opzione viene lasciata in disponibilità al cliente per non limitarlo nelle pagine dove il supporto è funzionante al 100% a condizione che questi non la utilizzi in tali sezioni.