Foros del Web - Ver Mensaje Individual

KarlanKas · #6 (**permalink**) 27/06/2003, 11:19

Hola a todos!

He hecho, con ayuda del magnífico SCRIPT de ajuste de ventana a imagen de tunait una sencilla galería de imágenes. No está tan terminada como me gustaría, pero creo que te servirá. Por supuesto es mejorable y aceptaré gustoso cualquier sugerencia.

He intentado hacerla lo más fácil de manejar posible y para ello me he valido de las típicas variables con las que configurar los parámetros (número de filas y columnas, forzado de tamaño de la imagen mini...) y de constructores para generar el código.

En caso de tener cualquier duda al respecto por favor pregunta.

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 
<html>

<head>

    <title>Galería de Imágenes</title>

    <style>

    A{font:normal 10px/10px verdana;

    color:blue;

    text-decoration:none;

    }

    input{font:normal 10px/10px verdana}

    </style>

<script>

 
var ventana

var cont=0

imagen=new Array;

function nueva(peque,grande,nombre){

this.peque=new Image;

this.grande=new Image;

if(!nombre){this.titulo=false}

else{this.titulo=nombre}

this.peque.src=peque

this.grande.src=grande;

}

//----------------- VARIABLES EDITABLES ---------------------------

 
var tituloGaleria="Galería de imágenes"//Título por defecto de la galería

 
var titulopordefecto = "Galería de imágenes" //texto por defecto

// a mostrar en la barra de título de la pop up en caso de omitir el argumento titulo

 
var fotosPorFila=3;

 
var fotosPorColumna=3;

 
var forzarAncho=80;//Pon el ancho al que quieres forzar las 

//imágenes en miniatura. Si pones 0 no forzará nada

 
var forzarAlto=80;//Pon el alto al que quieres forzar las imágenes

//en miniatura. Si pones 0 no forzará nada

 
// -----------------------------------------------------------------------------

// | Pon todas las imágenes que quieras                                         |

// | Sintaxis:                                                                  |

// |        imagen[n]=new nueva(<imagen pequeña>,<imagen grande>,[titulo]);     |

// -----------------------------------------------------------------------------

 
imagen[0]=new nueva('1b.jpg','1.gif','foto Añaer');

imagen[1]=new nueva('2b.jpg','2.jpg','Ya sabía yoo...');

imagen[2]=new nueva('3b.jpg','3.jpg','Con faldas y a lo loco');

imagen[3]=new nueva('4b.jpg','4.jpg');

imagen[4]=new nueva('1b.jpg','1.jpg','foto rara');

imagen[5]=new nueva('2b.jpg','2.jpg');

imagen[6]=new nueva('3b.jpg','3.jpg','los amigos');

imagen[7]=new nueva('4b.jpg','4.jpg');

imagen[8]=new nueva('1b.jpg','1.jpg','foto rara');

imagen[9]=new nueva('2b.jpg','2.jpg');

imagen[10]=new nueva('3b.jpg','3.jpg','los amigos');

imagen[11]=new nueva('4b.jpg','4.jpg');

 
//------------- NO EDITES A PARTIR DE AQUÍ SI NO SABES LO QUE HACES -----------------

 
 
//script por Tunait

//Modificado un poquiiiito por KarlanKas

 
function afoto(cual){

titulo=imagen[cual].titulo;

cual=imagen[cual].grande.src;

if(cont==1){ventana.close();ventana=null}

if(titulo==null){titulo=titulopordefecto}

ventana=window.open('','ventana','resizable=yes,scrollbars=no')

ventana.document.write('<html><head><title>');

ventana.document.write(titulo + '</title></head>');

ventana.document.write('<body style="overflow:hidden"');

ventana.document.write('marginwidth="0" marginheight="0"');

ventana.document.write('topmargin="0" bottommargin="0"');

ventana.document.write('leftmargin="0" rightmargin="0"'); 

ventana.document.write('scroll="no" onUnload="opener.cont=0">');

ventana.document.write('<img onError="self.close()" src="' + cual + '" alt="'+titulo+'" ')

ventana.document.write('onLoad="opener.redimensionar(this.width, this.height)">')

if(ventana&&!ventana.closed){ventana.document.close()}

cont++

}

function redimensionar(ancho,alto)

{

ventana.resizeTo(ancho+12,alto+28)

ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2) //centra la ventana. 

//Eliminar si no se quiere centrar el popup

}

</script>

<script>

// Resto de KarlanKas para forosdelweb.com

 
var codigo=""

var tituloPuesto=""

anadir=" style='"

anadir+=(forzarAncho)?" width:"+forzarAncho+" px;":"";

anadir+=(forzarAlto)?" height:"+forzarAlto+" px;":"";

anadir+="' "

foto=-1;

 
function montarTabla(vamosAtras){

if(vamosAtras){foto-=(2*fotosPorFila*fotosPorColumna)}

if (foto<(imagen.length)){

    codigo="<center><table>"

    for (fila=0;fila<fotosPorFila;fila++){

        codigo+="<tr>"

        for (columna=0;columna<fotosPorColumna;columna++){

            foto+=1;

            if(foto<imagen.length){

                if(!imagen[foto].titulo){

                    imagen[foto].titulo="Imagen "+(1+foto)

                }

                

            }            codigo+="<td valign='top'"; 

            codigo+="align='center'";

            codigo+="style='width:"+(forzarAncho+10)+" px;height:"+(forzarAlto+30)+" px;overflow:auto'>";

            if (imagen[foto]){

                codigo+="<A HREF='javascript:afoto("+foto+")'";

                codigo+="onFocus='this.blur()'>";

                codigo+="<img border=0 src='"+imagen[foto].peque.src+"'"+anadir+">";

                codigo+="<br>"+imagen[foto].titulo+"<br><br></A>";

            }

            codigo+="</td>";}

            codigo+="</tr>";

}

            habilitadoAtras=(foto==((fotosPorFila*fotosPorColumna)-1))?"disabled":""

        habilitadoAlante=((foto+1)>=imagen.length)?"disabled":""

        codigo+="</table>";

        codigo+="<br>";

        codigo+="<input type='button' "

        codigo+=habilitadoAtras+" value='< Anteriores' onClick='montarTabla(true)'>";

        codigo+="<input type='button' "

        codigo+=habilitadoAlante+" value='Siguientes >'  onClick='montarTabla()'></center>";    }

    document.getElementById('tabla').innerHTML=codigo;

}

</script>

</head>

 
<body onLoad="montarTabla()"><center><h1><script>document.write(tituloGaleria)</script></h1></center>

 
<div id="tabla"></div>

</body>

</html>