JavaScript - hacer grande la foto

   
Vista:

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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:hacer grande la foto

Publicado por mercedes (2 intervenciones) el 03/12/2009 11:14:43
me refiero a pinchar sobre ella que se haga grande
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:hacer grande la foto

Publicado por Pedro Meza (25 intervenciones) el 22/12/2009 14:38:25
puedes utilizar un div y construir la imagen con el tamaño que necesites
ej)

function muestraImagenCompleta(imgName) {
// "imgcompleta" deberia ser un div flotante que debes agregar algo asi:
// <div id="imgcompleta"></div>

var ventana = document.getElementById("imgcompleta");
var html = "<table><tr><td><img src='"+ imgName +" width=100%'></td></tr></table>";

// insertas el html en el div
ventana.innerHTML = html;

// le das la posición donde quieras agregar el div
ventana.style.position = "absolute";
ventana.style.top = 100;
ventana.style.left = 100;
ventana.style.zIndex = 10;
}

puedes mejorar el código para que quede mejor, la otra solución es usar una librería y solo la incluyas, te recomiendo lightbox2
esta es la página:

http://www.lokeshdhakar.com/projects/lightbox2/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar