thumbsZoom

anteprima frontendanteprima opzionipulsante pausapulsante play

Un plug-in per Zenphoto.magnifier

Probabilmente sto invecchiando, perché non riesco più a sopportare di avere sotto gli occhi cose troppo piccole, che siano minuscoli caratteri tipografici di alcuni libri in edizione economica, illeggibili liste di conservanti sulle etichette delle scatole di fagioli, o miniature di immagini in una galleria fotografica on line.
Probabilmete dovrei accettare che è venuto il momento di andare da un oculista, comprare un paio di occhiali e abituarmi ad inforcarli, almeno ogni volta che qualcosa da guardare sia troppo vicina al mio naso.

Ma tutto questo è davvero troppo difficile da affrontare per me, quindi ho cominciato ad acquistare libri in edizioni prestigiose e a godermi le verdure fresche. Infine, per il mio sito internet, ho scritto questo plug-in, che mostra un'immagine ingrandita ogni volta che il mouse si ferma sulla miniatura di una foto, negli album e nei risultati delle ricerche.
L'oculista può attendere.

“thumbsZoom” è progettato per essere compatibile con tutti i temi ufficiali di Zenphoto e possibilmente con molti temi personalizzati. Dovrebbe funzionare senza problemi con le impostazioni standard.
Se vi sentite come me in fatto di vista, o se semplicemente volete offrire ai visitatori un'anteprima più grande ogni volta che questi interagiscono con le miniature, senza dover cambiare la grafica del sito, tutto quel che dovete fare è quanto segue:

  1. scaricare il file zip ed estrarne il contenuto.
  2. caricare il tutto via ftp nella cartella plugins di Zenphoto sul server.
  3. abilitare “thumbsZoom” nel pannello di amministrazione.

Per saperne di più su opzioni, metodo alternativo, personalizzazione, temi compatibili, traduzioni, versioni di Zenphoto provate, ringraziamenti e versioni precedenti, continuate a leggere questa pagina, atrimenti non vi resta che scaricare “thumbsZoom” e provarlo.

Opzioni → { default } | ( alternativa ) ~ [ unità ]

• Dimensioni dello zoom → { 220 } | ( intero positivo ) ~ [ pixel ]

Lunghezza in pixel per il lato lungo dell'immagine ingrandita. Questa impostazione può essere sovrascritta nel tema quando il metodo è impostato su Ciclo PHP.
Da notare che, se il metodo scelto è Richiesta ajax, dopo aver cambiato la dimensione dello zoom potrebbe essere necessario svuotare la cache del browser prima di vedere il risultato.

• Metodo → { Richiesta ajax } | ( Ciclo PHP )

Questa opzione dovrebbe essere cambiata solo da utenti esperti.
“Metodo” è il sistema con cui il plug-in determina quale sia l'immagine da ingrandire e la prepara.

Richiesta ajax si basa sul link associato alla miniatura per individuare l'immagine da ingrandire, che viene poi costruita in una pagina sul server e caricata al volo nel contesto da cui è stata richiesta.
La pagina è stata preparata in modo da essere conservata nella cache del browser, quindi, dopo la prima richiesta, dovrebbe essere immediatamente disponibile per le successive visualizzazioni.

Ciclo PHP necessita di una piccola modifica al codice dei file album.php e search.php nel vostro tema (vedere le istruzioni qui sotto). Grazie al codice aggiunto al tema, tutti i link alle immagini ingrandite vengono definiti durante il caricamento della pagina e inviati al programma javascript. Non usare questo metodo con un tema ufficiale, perché le modifiche andrebbero perdute al successivo aggiornamento di Zenphoto.

Il metodo alternativo è preferibile solo se il server non è abbastanza rapido da fornire una risposta sufficientemente pronta alla richiesta ajax, o se c'è la necessità di definire zoom di diverse dimensioni a seconda del tema usato.

• Pagine abilitate → { Entrambe } | ( Album ) | ( Ricerca )

Cambiando questa ozpione si può abilitare lo zoom solo nelle pagine album oppure solo nelle pagine dei risultati delle ricerche.

• Regolazione fine X,Y → { 0,0 } | ( intero ) ~ [ pixel ]

Posizionamento di precisione dello zoom sulla miniatura corrispondente. Aggiungere (sottrarre) X o Y pixel per spostare lo zoom a destra o in basso (a sinistra o in alto).
Il plug-in calcola automaticamente la posizione centrata, rilevando le misure in gioco, ma se il contenitore delle miniature non è simmetrico si rende necessaria questa regolazione. Ad esempio, la regolazione fine verticale per il tema Zenpage (versione 1.4.3.4 di Zenphoto) è -12 .

• Ritardo → { 200 } | ( intero positivo ) ~ [ millisecondi ]

Quanto a lungo il mouse deve restare fermo su una miniatura prima che inizi il processo di visualizzazione dello zoom.
Evitare valori troppo piccoli (sotto 50~100 ms). Se impostata su zero, questa opzione produce un comportamento equivalente al "mouseenter", generando diverse richieste inutili quando l'utente sta solo sopstando il mouse tra le miniature per raggiungerne una in particolare.

top (screenshots) - sommario (download)

Codice per il metodo alternativo ( Ciclo PHP )

Nei file album.php e search.php del tema che si vuole utilizzare, bisogna trovare il ciclo while (next_image()){...}, ed aggiungere questa linea al suo interno:

if (function_exists ('thumbsZoom_theme')) {thumbsZoom_theme($size);}

Sostituire $size con la dimensione desiderata per lo zoom: lasciarlo vuoto per usare il valore fissato nelle opzioni del plugin, oppure immettere un valore specifico per sovrascrivere quel valore solo per la pagina del tema che si sta modificando.

top (screenshots) - sommario (download)

Personalizzazione

“thumbsZoom” fissa alcune regole CSS obbligatorie, essenziali per il suo funzionamento, ed altre regole aggiuntive, usate per ragioni estetiche. Queste ultime possono essere cambiate, ma bisogna tener presente che al momento sono scritte in linea dal javascript, quindi è necessario marcare le regole personalizzate con l'istruzione !important .
La classe del contenitore dello zoom è .thumbsZoom e le regole usate dal plugin sono le seguenti:

Regole obbligatorie, che non dovrebbero essere cambiate:
display, position, bottom, left.

Regole aggiuntive, che possono essere sovrascritte per armonizzare lo zoom ad una grafica specifica:
background, border, border-radius, cursor, padding, z-index.

Nota: cambiare le dimensioni di padding o border potrebbe rendere necessario un aggiustamento di Regolazione fine X e Y.

top (screenshots) - sommario (download)

Temi compatibili

Tutti¹ i temi ufficiali di Zenphoto sono compatibili, compreso Stopdesign che ha una struttura tutta particolare.
I temi personalizzati basati su un tema ufficiale², senza modifiche ai nomi dei file (album.php e search.php) e ai nomi delle classi CSS, dovrebbero essere anch'essi compatibili, ammesso che il ciclo next_image non sia stato modificato nella sua architettura di base.

(¹) Naturalmente il plugin non funziona con dispositivi touch screen, dove l'evento “mouseover” non esiste, quindi i temi per dispositivi mobili non sono presi in considerazione e, se mobileTheme è abilitato nell'installazione di Zenphoto, il filtro del plugin non viene neanche attivato quando è rilevato un tablet o uno smartphone.

(²) I temi basati su Stopdesign non sono compatibili, perché il plugin non può individuarli senza conoscere il loro nome. Inoltre Stopdesign è stato abbandonato dagli sviluppatori di Zenphoto a partire da Zp 1.4.6.

top (screenshots) - sommario (download)

Traduzioni

Il plug-in è impostato per traduzioni basate su gettext, ed utilizza la chiave di ricerca pl_gettext per analizzare le stringhe in Poedit, come spiegato nel plugin translation tutorial di Zenphoto (in inglese).
Attualmente sono incluse solo le versioni inglese ed italiana. Se qualcuno dovesse decidere di tradurre le poche stringhe di questo plug-in nella sua lingua, sarei felice di inserire la traduzione nel pacchetto. Tutto ciò che posso offrire in cambio sono i ringraziamenti ed un link al sito del traduttore.

top (screenshots) - sommario (download)

Versioni di Zenphoto provate

Il plug-in è stato provato e funziona con le seguenti versioni di Zenphoto.

tumbsZoom 1.0.1:

  • 1.4.5
  • 1.4.6

thumsZoom 1.0:

  • 1.4.2.3
  • 1.4.3.5
  • 1.4.4

Le versioni non elencate non sono state provate, ma è molto probabile che “thumbsZoom” sia compatibile con tutte le versioni intermedie, ed anche quelle non troppo più vecchie della prima. In ogni caso è opportuno tenere sempre aggiornata la propria installazione di Zenphoto.

top (screenshots) - sommario (download)

Ringraziamenti

Si ringraziano i membri del team di Zenphoto per il gran lavoro svolto sul loro CMS e per la competenza e l'aiuto che ho trovato sul loro forum nel corso degli ultimi anni, aiuto che ha contribuito a permettermi di imparare i rudimenti di PHP e Javascript. Un grazie particolare a Malte Müller (acrylian) per la pazienza che ha avuto con me quando ero un neofita assoluto in questo campo.

Grazie a Richard Scarrott per jQuery Mousestop Event, incluso in questo plug-in.

top (screenshots) - sommario (download)

Versioni precedenti

Vecchie versioni del plugin, da utilizzare con vecchie versioni di Zenphoto.



3 commenti

Manghitzu: il 05 febbraio 2013

Hi Antonio, great job.
Tried it, works like a charm!

Antonio Ranesi: il 05 febbraio 2013

Thanks, I'm glad you are enjoying my plugin.

robertutzu: il 09 maggio 2014

uber plugin, good work :P

Aggiungi un commento:

* Campi richiesti