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 
Se trovi questo articolo su un blog diverso da “blog.merlinox.com” si tratta probabilmente di una copia non autorizzata. L’indirizzo originale di questo articolo è: Ingrandire immagini con javascript scritto da Merlinox.
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?
@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
Ciao, ho provato lo script e devo dire che è OTTIMO!
Ho però un unico problema, le immagini come nel tuo caso mi arriva da database
(il progetto è in asp.net con VB.net)
Come faccio a valorizzare con il percorso le immagini in ASP.net?
penso che tu usi:
<a href="_file/newsImg/” rel=”thumbnail”><img src="_file/newsImg/th_” class=”thDx” />
ma come fai a valorizzare la var immagine??con il suo percorso?
Grazie
@David hai resuscitato un vecchio post. Con ASP.net il costrutto < %= xxx %> lo puoi comunque usare. Oppure devi dichiarare il link come runat=”server” dargli un ID… e bla bla bla
Buono! puoi mica postare il link così ci do un occhiata!!!
@david è questo il vecchio post. Ma non riesco a capire dove non ti ritrovi.
il mio problema è questo:
il src dell’immagine viene passato da VB
Non riesco a richiamarlo dallo script perchè sulla pagina asp non lo posso dichiarare essendo dinamico…
la situazione è questa:
VB.NET
Image1.ImageUrl = “~/xxx/.jpg”
ASP
JS
var imageHTML=’<img src="'+link.getAttribute("???????????????")
@David
Ho visto che utilizzi VB.net, quindi la pagina su cui stai lavorando è in ASP.NET.
In .NET tutti i controlli web (il tuo Image1 per intenderci) hanno lato server una proprietà che si chiama “ClientId”. Questa proprietà, in sola lettura, contiene l’ID che il controllo assumerà nell’html.
Quindi… Se initetti anche il js dinamicamente e sostituisci gli id con il clientid dovresti risolvere il problema…