« Anti Phishing, c’è la guida | Main | Quei dilettanti di MICc83 e di Sballato »
Ingrandire immagini con javascript
By Merlinox | May 19, 2008
Sto rifacendo tutta una serie di tool che avevo già pronti, traducendoli da quella meraviglia di linguaggio che è coldfusion, a quella cosa destrutturata che è ASP (vbscript). Oggi mi sono imbattuto nel mio vecchio ImageViewer.
Già che c’ero gli ho dato pure una rinfrescata, in modo di aver un tool universale per ingrandire le immagini, in puro js + css, compatibile. Obiettivo quello di ottenere un image viewer, che funzionasse in pop over, e non in popup, ma che fosse compatibile anche con flash.
Ho trovato un ottimo javascript, basato su prototype, che faceva al caso mio. Con pochissime modifiche è diventato perfetto.
Lo script originale è di dynamicdrive. Sul loro sito trovate la demo di come funziona: è veramente facile. Copiate i 3 file (un javascript, un css e una immagine), volendo li adattate alle vostre esigenze e il gioco è fatto. Il javascript modificato lo trovate qui: thumbnailviewer.js. Per info sull’utilizzo preciso del js originale, fate riferimento al loro sito.
Per associare il plugin all’immagine è sufficiente linkare il thumbnail all’immagine originale grande, impostando come attributo REL uguale a "thumbnail". Esempio:
<a href="_file/newsImg/<%= menuSxNews("immagine") %>" rel="thumbnail"><img src="_file/newsImg/th_<%= menuSxNews("immagine") %>" class="thDx" /></a>
Io immagine lo tiro su da un ResultSet di DB.
Le mie modifiche a questo script si sono rese necessarie in quanto nel sito ho del FLASH e come tutti voi sicuramente sapete, nessuno DIV con all’interno semplice HTML, può sovrastare (z-index) un oggetto Flash. L’unico sistema è nascondere tutto il sito sotto - o la parte che infastidisce.
In un buon progetto di sito, soprattutto Table-less, è buona norma racchiudere tutto il sito in un macro layer, in modo da poter impostare proprietà CSS a tutto il sito, in modo facilissimo (css o js). Nel mio js aggiornato ho inserito questa feature. Nella creazione dell’oggetto originale thumbnailviewer, ora ci sono due nuove proprietà:
- mainDivName (id): il nome del nostro DIV contenitore di tutto il sito, o della parte che vogliamo nascondere. Se è vuoto (cioè "") enableFullMask è come fosse a FALSE
- enableFullMask (true | false): abilita la cancellazione del DIV chiamato sopra
Le modifiche effettuate sono state pochissime. Ho aggiunto le due proprietà nell’oggetto thumbnailviewer:
mainDivName: "main", //The main DIV
enableFullMask: true, //Enable main div "main" hiddening
Nella funzione init ho inserito la dichiarazione del nostro DIV da nascondere:
if (this.enableFullMask && (this.mainDivName!="")) {mainDiv = document.getElementById(this.mainDivName)}
Al caricamento dell’immagine nascondo il DIV dichiarato sopra:
if (this.enableFullMask && (this.mainDivName!="")){mainDiv.style.visibility="hidden"}
Nella funzione closeit ho riabilitato la visibilità del DIV nascosto e ho forzato (per lo stron*o di IE7) il rendering:
if (this.enableFullMask && (this.mainDivName!="")){
mainDiv.style.visibility="visible"
//enforse new rendering for IE7
mainDiv.innerHTML += ""
}
Il bello è che funziona benissimo 
Tags: asp, CSS, HTML, image viewer, javascript, plugin, prototype
Post simili
July 1st, 2008 at 10:21 am
Bellissimo post e script. L’ho provato con le modifiche perchè anch’io ho oggetti flash nella pagina. UN’unica cosa: lo script funziona a click intervallati: una volta si e l’altra volta mi si ingrandisce l’immagine come semplice link nel browser.da cosa può dipendere?
July 1st, 2008 at 10:24 am
@tets85: lavorare pesantemente sul DOM crea i suoi casini. Per prima cosa controlla (meglio con firefox) se ci sono errori dello script. Altrimenti il problema potrebbe essere legato al valore delle variabili su cui si fanno gli IF.
quindi o testi il tutto con un debugger serio (sinceramente non so consigliarti) oppure con il vecchio metodo degli “alert()” nei punti giusti