Ingrandire immagini con javascript

Javascript Image ViewerSto 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 🙂

Loading Facebook Comments ...

14 pensieri su “Ingrandire immagini con javascript

  1. Tets85

    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?

    Rispondi
  2. Merlinox Autore articolo

    @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 🙂

    Rispondi
  3. David

    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

    Rispondi
  4. Merlinox Autore articolo

    @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 🙂

    Rispondi
  5. franz

    @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…

    Rispondi
  6. Daniele

    Funziona ma fino ad un certo punto in quanto mi apre una pagina grande, non come nellìesempio, con fonso scuro e l’immagine al centro. Per uscire devo cliccare “indietro” del browser.

    Questo è il codice:

    <a href="” rel=”_small”>

    Ho modificato ne js thumbnail com _small.

    Arrivo con tre anni di ritardo, ma spero che qualcuno mid ia una dritta.

    Buona giornata

    Rispondi
    1. Merlinox Autore articolo

      Sinceramente non ricordo nemmeno quell’articolo, ma quello che ti posso consigliare è verificare se hai errori js.
      Con Chrome fai F12 e se ci sono ti mette una “x” rossa in basso a destra.

      Rispondi
      1. daniele

        No, non mi mette la X rossa iin basso a destra, ma mi legge il css della pagina:

        element.style {
        margin: 0px;
        }
        user agent stylesheetbody {
        display: block;
        margin: 8px; <== questo barrato
        }

        Potresti darmi qualche indicazione per risolvere, se possibile?
        Grazie

        Rispondi
  7. Pingback: Image Viewer Popover (Flash Compatible) @merlinox

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *