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>
