Pagina web: Muchas imágenes

StreaK · #1 (**permalink**) 25/01/2006, 13:41

Hola, estoy haciendo una web en html, se lo básico, y en ella quiero poner muchas imagenes, puede que sean 50, 100 o 500, da igual, lo que si lo hago en html la página tardará mucho en cargar, ya que las fotos no son pequeñas, lo que me gustaría es poner un link y que saliera una ventana (o en la misma) con la primera foto, y en la misma ventana, con la foto, 3 botones: siguiente, anterior y arriba. Supongo que habrán varias opciones, pero he visto alguna páginas en internet y la opción que más me gusta es en javascript, lo que no me gustaría es tener que hacer 500 paginas html o 500 enlaces uno para cada foto, había pensado en usar algún tipo de variable, las fotos tienen un número secuencial, así que con una variable no creo que sea difícil, yo creo que esto javascript lo hace, pero no tengo ni idea de java. Además la página se actualizará con regularidad con nuevas fotos, así que con cambiar algunas cosas ya debería tenerlo hecho. Se programación en C, quiero decir que alguna idea de programación si que tengo.
En principio no me quiero poner a aprender el lenguaje java porque esto es un proyecto para el trabajo y lo quieren cuanto antes, aunque para más adelante si estoy interesado en aprender. No sé si hay alguna otra opción para hacer lo que quiero, admito sugerencias.
Agradecería mucho vuestra ayuda.
Muchas gracias y un saludo.

Holden · #2 (**permalink**) 25/01/2006, 14:10

hay programas que te generan las galerias, te achican las imgs al tamaño que quieras y te crea la paginación.
No te sirve eso?

StreaK · #3 (**permalink**) 25/01/2006, 14:56

si, el dreamweaver lo hace, y tambien lo he probado con el photoshop, pero estos lo que hacen es un html para cada foto, y es justo lo que no quieren que haga, ademas seria muy dificil mantenerlo si quiero mas adelante añadir mas fotos. En el trabajo me han pedido simplicidad a la hora de programar y sobretodo que sea de calidad. Es muy dificil de hacer lo que pido??? Supongo que alguien tendra un patron o algo, luego yo lo adapto a lo que quiero...

clocko · #4 (**permalink**) 26/01/2006, 01:16

a de internet con muchas fotos, y si he hecho un html para cada foto, pero vale la pena, lo que tengo es una pagina con frames, del lado izquierdo tengo un indice de fotos y del lado derecho aparecen la foto que yo selecciono, he intentado con javascript(del cual soy novato) y si he logrado hacer todo en una sola pagina, pero al final, no he hecho algo que me convenza y me sigo quedando con mi pagina con frames,

clocko · #5 (**permalink**) 26/01/2006, 02:12

bueno ya estuve buscando entre mis cosas y aqui tienes este script que yo hice, a mi me funciona muy bien. a ver que te parece a ti.

<HTML>
<HEAD>
<title></title>
</HEAD>
<script LANGUAGE=JavaScript>
//aqui pones todas las direcciones de las fotos que quieras
var imagenes= new Array("foto1.jpg","foto2.jpg","foto3g","foton.jpg" );

var numero=0;
var cuantas=imagenes.length-1;

function siguiente(dato){
if (dato==0){
numero++;
if (numero>cuantas){
numero=0;}}

if (dato==1){
numero--;
if (numero<0){
numero=cuantas;}}

var poner= imagenes[numero];
foto.src=poner;
}

</script>
<BODY >
<form name="forma">
<input type=button value=siguiente name=boton onclick=siguiente(0);>
<input type=button value=anterior name=boton onclick=siguiente(1);>
</form>

<IMG id=foto name=foto src="foto1.jpg"></td></tr>
</BODY>
</HTML>

caricatos · #6 (**permalink**) 26/01/2006, 02:38

Hola StreaK, bienvenido a los foros

:

Tal vez te sirva mi galería: http://www.pepemolina.com/galeria/index.html
En estos momentos no tengo mucho tiempo para ayudarte, por si la quieres adaptar, pero creo que en la página puse bastante detalladamente la forma de hacerlo...

También puedes encontrar buenas galerías en la página de tunait: http://javascript.tunait.com/javascript/ y en la de Carlitos: http://www.carlitos.com.es/ Dos buenos amigos de estos foros (¡Hola

!)

Saludos

StreaK · #7 (**permalink**) 26/01/2006, 10:09

cuanta informacion, todo esto tiene buena pinta

gracias a todos
he visto las paginas y estan muy bien, ojala supiera algo de javascript, disfrutaria como un enano ahi, de momento no tengo pensado aprender esto, esto es algo que me han pedido para cuanto antes y no tengo tiempo de mas, aunque programar me gusta y quiero aprender javascript, mas adelante

tambien he probado el codigo que ha puesto clocko, es basicamente lo que quiero aunque adaptado a la pagina, en cuanto a colores y eso, aunque es lo de menos. he añadido otro boton, ARRIBA, pero no se como ponerle un enlace a una pagina html, como hago eso?
tambien me gustaria saber si se puede cambiar el aspecto de los botones, poner otro que yo quiera, de un gif/jpg o simplemente texto.
y lo ultimo mas importante. la pagina no se todavia cuantas fotos tendra, pongamos que 500 fotos, tendria yo que poner el nombre de las 500 fotos a mano en el array?? el nombre de las fotos seran numeros secuenciales, yo creo que debe haber alguna forma de crear una variable que recoja esos nombres automaticamente, en plan a++.jpg, algo asi. se un poco de programacion en c, quiero decir que tengo alguna idea de programar, por eso digo lo de las variables.
espero con ansia las respuestas, tengo que decir que me habeis devuelto la motivacion

Carlitos · #8 (**permalink**) 26/01/2006, 16:02

Hola.

Te respondo por aquí.

Código:

<script>
/**************************************************************
 Visor de fotos en javascript. Por Carlitos. [email protected]
 Si usas este script, deja intactas estas líneas (créditos). Vale?
 También te agradecería un e-mail con tus comentarios. ([email protected])
 Visor de fotos v.2 En fase de experimentación.
****************************************************************/

var idx=1
fotos=4 // Aquí debes poner el nº total de fotos



function pasa(dir)
{
if (dir=="i")
  {
  idx--
  if (idx < 1) idx = fotos
  }
else
  {
  idx++
  if (idx > fotos) idx = 1
  }
muestra()
}

function muestra()
{
document.images["fotico"].src = idx+".jpg"
document.forms[0].leyenda.value = "Foto " + idx + " de " + fotos
}
</script>
<body onLoad=" muestra();">

<p class="titulo">Visor de fotos.</p>
<form>
<input type="button" value="<<<" onclick="pasa('i')">
<input type="button" value=">>>" onclick="pasa('d')">
<input type="text" id="leyenda" size="10">
</form>
<img id="fotico" height="100" border="1">
</body>

sólo hay un requisito. que tus fotos tengan una numeración correlativa. empezando por el 1.
p. ej: 1.jpg, 2.jpg, 3.jpg ...

clocko · #9 (**permalink**) 28/01/2006, 01:12

hey si se puede poner una imagen que tu quieras.

mira le hice algunos cambios al script que puse anteriormente.

<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
</HEAD>

<script LANGUAGE=JavaScript>

var numero=0;
var cuantas=15;//aqui pones el numero de imagenes que tienes

function siguiente(dato){
if (dato==0){
numero++;
if (numero>cuantas){
numero=0;}}

if (dato==1){
numero--;
if (numero<0){
numero=cuantas;}}

foto.src=numero+".jpg";

//si las fotos estan dentro de una carpeta
//entonces seria
//fotos.src="carpeta-donde-estan/"+numero+".jpg";
}

</script>
<BODY >

<font> si lo quieres con efecto tienes que hacer dos imagenes para cada enlace que sirvan como boton</font><p>

<a href="javascript:siguiente(0)"><IMG border=0 id=boton src="botonsiguiente.gif" onmouseover='boton.src="botonsiguiente-pulsado.gif"' onmouseout='boton.src="botonsiguiente.gif"' ></a>
<a href="javascript:siguiente(1)"><IMG border=0 id=boton2 src="botonanterior.gif" onmouseover='boton2.src="botonanterior-pulsado.gif"' onmouseout='boton2.src="botonanterior.gif"'></a><p>
<font> si lo quieres normal solo haces una imagen para cada boton</font><p>
<a href="javascript:siguiente(0)"><IMG border=0 src="botonsiguiente.gif"></a>
<a href="javascript:siguiente(1)"><IMG border=0 src="botonanterior.gif"></a><p>
<font> si lo quieres con texto</font><p>
<a href="javascript:siguiente(0)">siguiente</a>
<a href="javascript:siguiente(1)">anterior</a> <p>
<p>
<font>la imagenes se numeran de cero en adelante</font><p>
<IMG id=foto name=foto src="0.jpg"></td></tr>

</BODY>
</HTML>