consiglio sul metodo per lo zoom dell'immagine

Kelly

Utente Attivo
5 Set 2008
112
1
18
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
5 Set 2008
112
1
18
Grazie mille

ottimo! vada per questa soluzione.

grazie come sempre
;-)


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

Utente Attivo
5 Set 2008
112
1
18
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



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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
A [Visual Basic] Consiglio sul datagridview Visual Basic 0
L Consiglio sul mio sito web HTML e CSS 17
V Consiglio sul controllo variabili di sessione PHP 1
D consiglio sul nome del sito Presenta il tuo Sito 3
C [Diagramma E/R] Consiglio su progetto Database 0
sbolde91 Consiglio gestione Hosting Hosting 0
B Richiesta Consiglio E-commerce Content Management System (CMS) 0
A consiglio su telecamere ip wi-fi Presentati al Forum 0
S Consiglio esercizio Javascript Javascript 2
M Consiglio sulla gestione di Gerarchie Database 0
L Consiglio SEO gestione dominio + free hosting SEO e Posizionamento 3
M [DIAGRAMMA ER] Consiglio su progetto Presentati al Forum 1
R Consiglio Hosting per e-commerce Hosting 7
L Ciao, chiedo consiglio Presentati al Forum 1
Web93 RICHIESTA CONSIGLIO - FARE UN SITO WEB Content Management System (CMS) 1
F Consiglio IP camera per timelapse (anche notturno) IP Cam e Videosorveglianza 0
M [PHP] Consiglio su come istanziare un Bottone PHP 0
S [PHP] Richiesta consiglio PHP 1
M Consiglio su problematica impianto videosorveglianza IP Cam e Videosorveglianza 4
M [HTML] consiglio su label e checkbox riguardo l'allineamento HTML e CSS 2
D consiglio evitare truffe Annunci servizi di Social Media Marketing 11
G [Diagramma ER] Consiglio su progetto Database 0
G consiglio acquisto telecamera nascosta in sensore allarme IP Cam e Videosorveglianza 0
N Consiglio struttura database WFM Database 1
Q consiglio per python Programmazione 1
C Consiglio configurazione IPCam on line su pagina web IP Cam e Videosorveglianza 2
A Consiglio hosting offshore?? Hosting 3
L Wordpress: consiglio plugin per "verifica disponibilità" WordPress 0
S Consiglio Gestionale/ERP su commessa Windows e Software 0
A Richiesta consiglio per kit videosorveglianza IP Cam e Videosorveglianza 0
D [Photoshop] Consiglio acquisto tavoletta grafica de xp-pen Photoshop 0
R Consiglio rete cablata Reti LAN e Wireless 4
D Consiglio per rete ufficio Reti LAN e Wireless 0
W [CMS] Un consiglio per il CMS più adatto a me Content Management System (CMS) 2
E Consiglio sistema di videosorveglianza IP Cam e Videosorveglianza 0
D [HTML] Consiglio su sito Joomla Joomla 6
M [MS Access] consiglio sviluppo query MS Access 1
D Consiglio su come impostare IP statico Reti LAN e Wireless 0
G [PHP] Consiglio su Qry/array PHP 3
M Consiglio su creazione rete Reti LAN e Wireless 0
trattorino Consiglio e parere Annunci servizi di Social Media Marketing 4
Ibernato Consiglio host Hosting 7
M consiglio sistema di videosorveglianza IP Cam e Videosorveglianza 1
andreas88 Consiglio valore in euro di un Notebook usato Discussioni Varie 3
G consiglio telecamere per esterno IP Cam e Videosorveglianza 4
W Consiglio su gestione di un form con XMLHttpRequest Ajax 0
E Consiglio telecamera wifi motorizzata esterno con power bank IP Cam e Videosorveglianza 5
felino TV Box Android: consiglio su quale acquistare Discussioni Varie 0
A Ciao a tutti, volevo chiedervi un consiglio riguardo l'errore che viene fuori quando tento di lancia Presentati al Forum 1
S Consiglio telecamere v.sorveglianza IP Cam e Videosorveglianza 1

Discussioni simili