hacer grande la foto
Publicado por mercedes (2 intervenciones) el 03/12/2009 09:22:18
buenas he creado una galeria fotografica y me gustria saber si hay alguna forma de hacer grande la foto si necesidad de hacer un link a una pagina nueva con la foto grande.os paso el codigo, muchas gracias.
<title>Galeria Javascript</title>
<script language="javascript">//Array en la que debemos incluir
// la ruta a todas las imágenes de nuestro albumvar
misImagenes= new Array(3)
misImagenes [0]= "imagenes/1.jpg";
misImagenes [1]= "imagenes/2.jpg";
misImagenes [2]= "imagenes/3.jpg";
misImagenes [3]= "imagenes/4.jpg";
var i = 0;//funcion de carga de la primera imagen
function cargarImagen(){
document.imgSrc.src = misImagenes[i] ;}
function anterior(){ if(i<1){
var NumImagen = i }
else {
var NumImagen = i-=1; }
document.imgSrc.src = misImagenes[NumImagen];}
function siguiente(){
if(i>2){
var NumImagen = i }
else {
var NumImagen = i+=1; }
document.imgSrc.src = misImagenes[NumImagen];}//Llamar a la función
window.onload=cargarImagen;
var _img_grande;
function mostrar() {
var ops = "top=" + ((screen.height - _img_grande.height) / 2);
ops += ",left=" + ((screen.width - _img_grande.width) / 2);
ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
var ventana = window.open("", "", ops);
ventana.document.write(contenido);
ventana.document.close();
}
function cargando() {
if (_img_grande.complete) mostrar();
else setTimeout("cargando()", 100);
}
function abrir(imagen) {
_img_grande = new Image();
_img_grande.src = imagen;
cargando();
}
</script>
<style type="text/css">
body { margin-top:40px;}
td a { font:9px Verdana, Arial, Helvetica, "sans-serif"; color:#FFFFFF; text-decoration:none;}
</style>
</head>
<body>
<div style="width:400px; height:300px; margin: auto;">
<img alt="ImÁgenes de la galeria" name="imgSrc" width="379" height="167" id="imgSrc" onclick="abrir('imgSrc')" >
</div>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="background:#666; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onClick="anterior();"> < Anterior</a></td>
<td align="center"><a href="#" onClick="siguiente();">Siguiente > </a></td>
</tr>
</table>
</body>
</html>
<title>Galeria Javascript</title>
<script language="javascript">//Array en la que debemos incluir
// la ruta a todas las imágenes de nuestro albumvar
misImagenes= new Array(3)
misImagenes [0]= "imagenes/1.jpg";
misImagenes [1]= "imagenes/2.jpg";
misImagenes [2]= "imagenes/3.jpg";
misImagenes [3]= "imagenes/4.jpg";
var i = 0;//funcion de carga de la primera imagen
function cargarImagen(){
document.imgSrc.src = misImagenes[i] ;}
function anterior(){ if(i<1){
var NumImagen = i }
else {
var NumImagen = i-=1; }
document.imgSrc.src = misImagenes[NumImagen];}
function siguiente(){
if(i>2){
var NumImagen = i }
else {
var NumImagen = i+=1; }
document.imgSrc.src = misImagenes[NumImagen];}//Llamar a la función
window.onload=cargarImagen;
var _img_grande;
function mostrar() {
var ops = "top=" + ((screen.height - _img_grande.height) / 2);
ops += ",left=" + ((screen.width - _img_grande.width) / 2);
ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
var ventana = window.open("", "", ops);
ventana.document.write(contenido);
ventana.document.close();
}
function cargando() {
if (_img_grande.complete) mostrar();
else setTimeout("cargando()", 100);
}
function abrir(imagen) {
_img_grande = new Image();
_img_grande.src = imagen;
cargando();
}
</script>
<style type="text/css">
body { margin-top:40px;}
td a { font:9px Verdana, Arial, Helvetica, "sans-serif"; color:#FFFFFF; text-decoration:none;}
</style>
</head>
<body>
<div style="width:400px; height:300px; margin: auto;">
<img alt="ImÁgenes de la galeria" name="imgSrc" width="379" height="167" id="imgSrc" onclick="abrir('imgSrc')" >
</div>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="background:#666; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onClick="anterior();"> < Anterior</a></td>
<td align="center"><a href="#" onClick="siguiente();">Siguiente > </a></td>
</tr>
</table>
</body>
</html>
Valora esta pregunta
0