- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Ingrandire un' immagine tutto schermo
-
Ingrandire un' immagine tutto schermo
Ho il seguente problema...
Ho un wallpapers in anteprima nella mia pagina, l'utente se clicca sopra l'immagine dovrebbe vederla a tutto schermo... usando questo codice riesco a farla aprire ma rimane all' interno del layout della pagina.
Come faccio per far si che si veda tutta l'immagina su l'intera pagina.
Grazie<div style="position:relative;z-index:1000;top:-100;"></>
<div align="center">[Clicca sull' immagine per vederla nelle sue dimensioni reali]<IMG id=thepic onclick="scaleImg('thepic')"
src="<? echo "/women/$donne[categoria]/$donne[cartella]/wallpapers/$wallpapers[nome_foto]"; ?>"
onload="scaleImg('thepic')"><br>
Wallpapers n°<? echo "$wallpapers_corrente"; ?> dell' album <? echo "$categoria_wallpapers_it" ; ?> di <b><? echo "$donne[nome]" ; ?></b>.</div></div>
-
Vuoi un'immagine che occupa l'intero pagina o vuoi che l'intera pagina con l'immagine occupa pure l'intero schermo del computer?
-
Ciao gallomania,
non credo che questo sia un problema di css ma piuttosto di javascript.
Per fare in modo che possiamo aiutarti dovresti postare il codice dello script "scaleImg", anche se credo che sia lo stesso che uso io. Se e' cosi' tale script serve a far in modo che l'immagine venga ridimensionata automaticamente fino a restare nella porzione di pagina che la contiene. Inoltre, cliccandoci sopra l'immagine torna alla sua dimensione originale.
-
si giusto fa proprio quello... cliccando sopra si allarga fino alla porzione della pagina e cliccando di nuovo sopra torna alle sue dimensioni...
però a me serve che l'immagine si alllarga oltre la porzione della pagina per fare vedere tutta la foto...
-
ecco il codice:
<SCRIPT language=javascript>
var saveWidth = 0;
function scaleImg(what){
what = document.getElementById(what);
if (navigator.appName=="Netscape")
winW = window.innerWidth;
if (navigator.appName.indexOf("Microsoft")!=-1)
winW = document.body.offsetWidth;
if (what.width>(700) || saveWidth>(700)) {
if (what.width==(700))
what.width=saveWidth;
else
{
saveWidth = what.width;
what.style.cursor = "pointer";
what.width=(700);
}
}
}
</SCRIPT>
-
sapete per caso dirmi se c'è un metodo per fare quello che mi serve...
grazie
-
Qualcosa come lightbox, thickbox, shadowbox non ti va bene?
-
mmmm riesci a spiegarti meglio.... riesce a fare la funzione che mi serve? grazie
-
Sono programmi javascript free già pronto, quelli dove ti oscura la pagina principale e poi carica la foto sopra. Tutte le dimensioni, colori e grado di oscuramento sono personalizzabili.
Per esempio c'è questa demo qua di shadowbox per large images, che ti lascia scegliere come vuoi gestire l'immagine qualora risulta troppo grande per la finestra dl browser dell'utente: htt p://mjijackson.com/shadowbox/index.html#lgimage-demo