consiglio sul metodo per lo zoom dell'immagine

Kelly · 26 Giu 2014

A) zoommare immagini
Ho un elenco di articoli, con immagine, codice e descrizione.
L'immagine devo poterla ingrandire, in tal caso se lo faccio tramite popup
(window.open) e sono disabilitati i popup il navigatore non vede le immagini giusto?
L'alternativa sarebbe quella di andare in altra pagina, però poi la cosa non è immediata e mi piace poco, ci sono altre alternative?
Per esempio ebay usa i popup giusto?
grazie 1000

criric · 26 Giu 2014

Ciao, potresti creare un contenitore nascosto e posizionarlo dove vuoi nella pagina.
al click sull immagine lo apri e gli inserisci l'immagine cliccata
nel contenitore metti una X o un link per chiuderlo

HTML:

<html>
    <head>
        <style>
            div#immagine {
                position: absolute;
                display: none;
            }
            div#immagine img {
                width: 335px;
            }
            img.thumb {
                width: 55px;
            }
        </style>
        <script>
            function mostra(img) {
                document.getElementById('img').src = img;
                document.getElementById('immagine').style.display = "block";
            }
            function chiudi() {
                document.getElementById('immagine').style.display = "none";
            }
        </script>
    </head>
    <body>
        <div id='immagine'>
            <img id='img' src='img/01.jpg' alt='01'/><br/>
            <a href='javascript:chiudi()'>chiudi</a>
        </div> 
        <img onclick='mostra(this.src)' class='thumb' src='../img/01.jpg' alt='01'/><br/><br/>
        <img onclick='mostra(this.src)' class='thumb' src='../img/02.jpg' alt='02'/><br/><br/>
        <img onclick='mostra(this.src)' class='thumb' src='../img/03.jpg' alt='03'/><br/><br/>

    </body>
</html>

Kelly · 26 Giu 2014

Grazie mille

ottimo! vada per questa soluzione.

grazie come sempre
;-)

criric ha scritto:

Ciao, potresti creare un contenitore nascosto e posizionarlo dove vuoi nella pagina.
al click sull immagine lo apri e gli inserisci l'immagine cliccata
nel contenitore metti una X o un link per chiuderlo

HTML:

<html>
    <head>
        <style>
            div#immagine {
                position: absolute;
                display: none;
            }
            div#immagine img {
                width: 335px;
            }
            img.thumb {
                width: 55px;
            }
        </style>
        <script>
            function mostra(img) {
                document.getElementById('img').src = img;
                document.getElementById('immagine').style.display = "block";
            }
            function chiudi() {
                document.getElementById('immagine').style.display = "none";
            }
        </script>
    </head>
    <body>
        <div id='immagine'>
            <img id='img' src='img/01.jpg' alt='01'/><br/>
            <a href='javascript:chiudi()'>chiudi</a>
        </div> 
        <img onclick='mostra(this.src)' class='thumb' src='../img/01.jpg' alt='01'/><br/><br/>
        <img onclick='mostra(this.src)' class='thumb' src='../img/02.jpg' alt='02'/><br/><br/>
        <img onclick='mostra(this.src)' class='thumb' src='../img/03.jpg' alt='03'/><br/><br/>

    </body>
</html>

Kelly · 26 Giu 2014

zoom dell'immagine

Ho provato l'esempio ed è molto carino e funzionale....

vorrei fare una domanda, dovendo visualizzare immagini piccole e grandi,
mi conviene partire da un'immagine grande per poi ridimensionarla con 'thumb' ,
perchè immagino che se facessi il contrario l'immagine la vedrei sgranata giusto?

e a questo punto, mi conviene caricare fisicamente
una sola immagine grande magari di 50kb per poi ridimensionarla come nell'esempio, o caricare un file immagine
di 3 kb per le piccole e di 50 kb per le grandi?

Tenendo conto che se dalla query risultante ho 10 record, devo subito vedere 10 immagini thumb, e solo se io
clicco su una di queste devo poterla ingrandire....
spero di essere stata chiara!

grazie

criric ha scritto:

Ciao, potresti creare un contenitore nascosto e posizionarlo dove vuoi nella pagina.
al click sull immagine lo apri e gli inserisci l'immagine cliccata
nel contenitore metti una X o un link per chiuderlo

HTML:

<html>
    <head>
        <style>
            div#immagine {
                position: absolute;
                display: none;
            }
            div#immagine img {
                width: 335px;
            }
            img.thumb {
                width: 55px;
            }
        </style>
        <script>
            function mostra(img) {
                document.getElementById('img').src = img;
                document.getElementById('immagine').style.display = "block";
            }
            function chiudi() {
                document.getElementById('immagine').style.display = "none";
            }
        </script>
    </head>
    <body>
        <div id='immagine'>
            <img id='img' src='img/01.jpg' alt='01'/><br/>
            <a href='javascript:chiudi()'>chiudi</a>
        </div> 
        <img onclick='mostra(this.src)' class='thumb' src='../img/01.jpg' alt='01'/><br/><br/>
        <img onclick='mostra(this.src)' class='thumb' src='../img/02.jpg' alt='02'/><br/><br/>
        <img onclick='mostra(this.src)' class='thumb' src='../img/03.jpg' alt='03'/><br/><br/>

    </body>
</html>

criric · 26 Giu 2014

io di solito carico direttamente l'immagine grande e la rimpicciolisco per la miniatura, così quando clicchi sulla piccola la grande è già caricata.
Sempre che le immagini non pesino troppo

Cerca

Cerca

consiglio sul metodo per lo zoom dell'immagine

Kelly

Utente Attivo

criric

Super Moderatore

Kelly

Utente Attivo

Kelly

Utente Attivo

criric

Super Moderatore

Discussioni simili