HACER UN ÁLBUM DE FOTOS

Introducción: básicamente este manual será una traducción de esta página http://www.javascriptkit.com/script/script2/pslide2.shtml, aunque el álbum tendrá algunas mejoras que os las pondré yo. Bueno el código inicial es este copiadlo en la página que queráis que después se modificará:

Insertar nuestras fotos o imágenes con sus descripciones: las fotos han de ponerse una por una, igual que las descripciones. Imaginemos que tenemos que poner dos fotos, una de un hermano y otra de una hermana, tendremos que sustituir lo siguiente.

• Esto de arriba se eliminaría y se pondría...

Obviamente deberás cambiar fotos/mi-hermano.jpg por la url de la foto que quieras poner, lo mismo pasa con photos[1]. Ahora pasamos a las descripciones que básicamente es igual. Sustituiremos:
text[0]="Libby watching another dog from the front porch" text[1]="A calm moment. EXTREMELY RARE!" text[2]="Curious as to what that flash was all about" text[3]="Mad at Momma for taking pictures." text[4]="Libby striking back!" text[5]="They make messes and they lay in them." text[6]="Libby catching a frisbee, Ministix following."
• por...

• Una cosa que se me olvidaba, la imagen [0] no aparece automaticamente así que habrá que cambiar
  <img src="http://www.javascriptsolutions.com/imagesOLD/Img002.jpg" width="400" height="264" name="photoslider">
  por, en este caso
  <img src="fotos/mi-hermano.jpg" name="photoslider">
  El width y el height se pone lo ponéis segun la imagen. Recordad que las demás imágenes no cambiarán esos parámetros así que alguna que otra se verá desformada. Se puede poner para que cada una ponga su tamaño pero no lo aconsejo, porque puede deformar la página. Pero si queréis que se cambie simplemente no pongais esos dos parámetros.

Modificaciones: podéis cambiar los nombres a los botones, mejor dicho no el parámetro name sino el parámetro value y modificaciones así podeis hacer bastantes con este código a vuestro gusto, aquí os pongo modificaciones más complejas. A lo mejor no os gusta que las fotos se vayan pasando de una en una o con botones. Aquí tengo las soluciones a ambos casos:

• Cambiar los botones por enlaces: este es el código del boton para atrás:
  <input type="button" value="<<Back" name="B2" onClick="backward()">
  pues si lo que queréis es hacer un enlace con la misma función...
  <a href="javascript:void(null)" onclick="backward()">Atrás</a>
  (no hace falta poner href="javascript:void(null)" pero suele quedar mejor. Algunos usan # en vez de javascript:void(null)...)
  ¿¿ O preferís poner imágenes como ?? Pues sencillo:
  <img src="http://www.webpersonal.net/AngelesYJose/javascript/cod/derecha.gif" onclick="backward()" width="35" height="30" border="0">
  lo mismo pasa que antes si quieres poner href="javascript:void(null)" no hay problema.
• Poner fotos como enlaces: a mí, personalmente no me gusta, como webmaster ni como visitante tener que ir pasando las fotos una a una. Por eso con esto que os voy a decir los visitantes podrán escoger ver una foto de entre varias. En este ejemplo, tenemos simplemente dos fotos, por eso no seria muy necesario, pero aquí va, lo primero que debéis hacer es copiar

function selecciona(){ document.images.photoslider.src=photos[foto] desc=foto document.rotater.description.value=text[desc]; which=foto what=foto }

Os voy a explicar este código qué hace, (yo no se este lenguaje, solo me he fijado en las otras funciones, así que a lo mejor lo explico no bien del todo):
·· function selecciona(){ crea la función
·· document.images.photoslider.src=photos[foto] esta hace que se muestre la imagen en el "photoslider".
·· desc=foto hace que la variable desc tenga el mismo valor que foto, para no tener que repetir cuando llamamos la funcion. Como por ejemplo:
onclick="foto=5;selecciona()" en vez de onclick="foto=5;desc=5;selecciona()"
·· document.rotater.description.value=text[desc]; muestra la descripción
·· which=foto esta función es la que hace que aunque seleccionemos una imagen, al pulsar siguiente se vea la que sigue, y no por la que iba antes de seleccionar una imagen. La variable which es la que usa el álbum en sí para las fotos.
·· what=foto esta función hace lo mismo que la de arriba, pero para las descripciones. La variable what es la que usa el álbum para las descripciones.
·· } cierra la función
Ahora vamos a como hacer que al pinchar en una imagen salga. Después de haber copiado el código de arriba (en cualquier parte de entre las etiquetas <script> y </script>) os aconsejo hacer "copias" a las imágenes que hay en el álbum con resolucion menor y que ocupe menos para que tarde en cargar menos (se puede usar hasta el paint :)). Despues de hacer esto, pues imagináoslo, que no es tan dificil :P, no obstante aquí está:
<img src="fotos/minis/mi-hermana.jpg" border="0" onclick="foto=2;selecciona()">
En este ejemplo, he puesto las imágenes pequeñas en una subcarpeta llamada minis aunque eso es lo de menos, lo importante es el onclick, esta imagen haría ver la de mi supuesta hermana, lo que quiere decir que sería la segunda, por eso foto=2.
• Ejemplos: aún no hay ejemplos, si has hecho un álbum con ayuda de este tutorial enviale el enlace al webmaster de CREATUPROPIAWEB.COM al email creatupropiaweb para que lo ponga aquí y que sirva como ejemplo.
• Recomendación: os recomiendo, que si teneis varias imágenes, uséis el javascript que hay en esta página llamado: "Menú en horizontal con desplacamientos" en la sección javascripts.
  
  
• Outroducción: listo, ya está el tutorial acabado, si no entiendes algo, crees que puedes mejorarlo, o cualquier cosa enviadme un email a jimenez.jm@terra.NOSPAMes( quita NOSPAM ). Y lo responderé si sé responderlo :P.

Por RaPPeR099 para CREATUPROPIAWEB.COM

Cerrar ventana