Publicentral.com - promocion,paginas,web,tutores,publicentralPromocion de paginas webs
Mostrando Codigo - Javascript
Code

Javascript - Galeria de Imagenes

Códigos Javascript

Divertida galeria con marquesina de imagenes, al pulsar sobre una imagen de la marquesina se muestra el resultado en tamaño mayor
Visitas: 32,623 - 22/09/2003 20.01.44
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION
Solo debemos modificar los nombres de las imagenes que queremos mostrar. En el ejemplo mostramos el codigo, pero no las imagenes.
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <html>
  2. <head>
  3. <title>Mi galeria</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <SCRIPT LANGUAGE="JavaScript">
  6. <!-- codigo ofrecido por tutores.org
  7. var fotos = new Array ("imagen1.gif","imagen2.gif","imagen3.gif","imagen4.gif","imagen5.gif","imagen6.gif","imagen7.gif","imagen8.gif", "imagen9.gif","imagen10.gif","imagen11.gif","imagen12.gif","imagen13.gif","imagen14.gif", "imagen15.gif","imagen16.gif","imagen17.gif","imagen18.gif","imagen19.gif","imagen20.gif");
  8.  
  9. function visualisar(num){
  10. var ver = new Image(300,250); //tamaño de la imagen a mostrar
  11. num=num-1;
  12.         document.ver.src = fotos[num];
  13. }
  14. //-->
  15. </SCRIPT>
  16. </head>
  17.  
  18. <body>
  19. <table width="500" height="300" border="0" cellpadding="0" cellspacing="0">
  20.   <tr>
  21.     <td height="90" valign="top"> <marquee width="550" height="75">
  22.       <br>
  23.       <img src="imagen1.gif" width="75" height="63" onClick="visualisar(1)">
  24.          <img src="imagen2.gif" width="75" height="63" onClick="visualisar(2)">
  25.         <img src="imagen3.gif" width="75" height="63" onClick="visualisar(3)">
  26.         <img src="imagen4.gif" width="75" height="63" onClick="visualisar(4)">
  27.         <img src="imagen5.gif" width="75" height="63"onClick="visualisar(5)">
  28.         <img src="imagen6.gif" width="75" height="63" onClick="visualisar(6)">
  29.         <img src="imagen7.gif" width="75" height="63" onClick="visualisar(7)">
  30.         <img src="imagen8.gif" width="75" height="63" onClick="visualisar(8)">
  31.         <img src="imagen9.gif" width="75" height="63"onClick="visualisar(9)">
  32.         <img src="imagen10.gif" width="75" height="63" onClick="visualisar(10)">
  33.         <img src="imagen11.gif" width="75" height="63" onClick="visualisar(11)">
  34.         <img src="imagen12.gif" width="75" height="63" onClick="visualisar(12)">
  35.         <img src="imagen13.gif" width="75" height="63" onClick="visualisar(13)">
  36.         <img src="imagen14.gif" width="75" height="63" onClick="visualisar(14)">
  37.         <img src="imagen15.gif" width="75" height="63" onClick="visualisar(15)">
  38.         <img src="imagen16.gif" width="75" height="63" onClick="visualisar(16)">
  39.         <img src="imagen17.gif" width="75" height="63" onClick="visualisar(17)">
  40.         <img src="imagen18.gif" width="75" height="63" onClick="visualisar(18)">
  41.         <img src="imagen19.gif" width="75" height="63" onClick="visualisar(19)">
  42.         <img src="imagen20.gif" width="75" height="63" onClick="visualisar(20)">
  43.       </marquee> <font color="#242969" size="2" face="Arial, Helvetica, sans-serif"><strong><br>
  44.       <center>PULSA SOBRE LA FOTO PARA VERLA AMPLIADA</center> </strong></font> </td>
  45.   </tr>
  46.   <tr>
  47.     <td height="210" valign="top"> <br>
  48.      <center> <img src="imagen1.gif" name="ver" width="250" height="210" id="ver"></center>
  49.     </td>
  50.   </tr>
  51. </table>
  52. </body>
  53. </html>
  54.  



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Galeria de Imagenes " href="http://www.tutores.org/codigo/592/" target="_blank">Galeria de Imagenes </a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
Franz
3 5
muy buen tuto graias era lo k necesitaba
Comentario usuario
19-11-2007 13:38:05
2 5
Muy bueno! simple, sencillo, perfecto.
Comentario usuario
Pemo
4 5
Muy bueno pero como puedo vaciar el array desde una base de datos, Gracias
Comentario usuario
Robertito_25
5 5
Hola muy bueno el script me sirvio pero tengo una duda como logro hacer que no vayan tan rapido las imagenes porque apenas las alcanzo a ver pasan demasiado rapido quise modificar el codigo pero no lo consegui asi que espero que me puedan ayudar con el delay o velocidad de las imagenes al pasar por favor espero su respuesta estare revisando constantemente gracias
Comentario usuario
27-08-2008 16:37:22
4 5
Robertito_25

Debes agregar esto en la opcion marquee

<marquee width="550" height="75" scrolldelay="500">

Entre mas grande el valor mas lento.

Saludos y que estes bien
Comentario usuario
robertito_25
4 5
jajaj mucho tiempo ya de este tema muchas gracias blakyto ya lo habia descubierto si jajaja te pasaste q estes bien ....dudo q lo leas pero q estes bien perro te pasaste muchas gracias :D
Comentario usuario
05-12-2008 23:27:19
1 5
Buenas amigos , yo queria si me podeis ayudar dos cosas .

1º En la seccion de presentacion de mi foro pongo el codigo <marquee> y me sale justo a partir de presentacion y me gustaria tenerlo como muestro en este foro , que codigo devo de usar ? .

Segundo como puedo poner una imagen a mi foro y en que sitio y que codigo devo usar igual que esta puesto en el mismo foro que muestro pero abajo del todo , los renos y papanoel .
Muchas gracias amigos y este es el foro que quiero que me quede igual :

http://emuleruis.com/
Comentario usuario
09-12-2008 17:11:26
2 5
Amigo la 2ª opción si te la puedo decir y es la siguiente .

En platilla del footer pones arriba del todo esto y te saldra hasta centrada :


<center><table>
<tr>

<td>
<img src="AQUI PONES LA URL DE LA SUBIDA DEL CRISMA "alt="d" longdesc="d" /> </td>
<td>
</td>
</tr>
</table></center>

==================================================== ========

El primer problema siento no poderte ayudar , pero seguro que hay alguien poray que te ayudara . Saludos
Comentario usuario
Sin definir
5 5
Ola buenass tengo una pregunta

y es esta

me sale bien la estructura y todo pero a la hora de ver las fotos me da error.. me sale la tipica cruz y no se ven :S

porqe puede ser?

contestar cuanto antes

muchas graciass
Comentario usuario
gnomo
1 5
¿como hacer para poner un boton de "stop"&"play" para la galeria?
gracias
Comentario usuario
30-05-2009 12:34:48
1 5
Ola necesito ayuda para soludionar el problema,
me sale bien para hacer el albun de fotos pero a la hora de ver las fotos no me salen debajo la foto qe elijo me da error,me sale la cruz y no se ven :
Comentario usuario
potozino
4 5
excelente....


me funciono a la perfeccion... mm... sencillo pro vistozo,,,, jejejje

saludos
Comentario usuario
slheior
2 5
saludos man t mereces un linker desde mi web site saludos.
PERO antes como hago para parchar ese vacio que existe estre la ultima foto y la primera foto? o sea que se avea continuo :D. saludos . leo
Comentario usuario
08-04-2010 03:34:27
1 5
hola no me muestra la imagen en grande al darle clik sobre ella, sobre la marquesina si la muestra pero no me deja
ayudenme porfa!!!
Comentario usuario
22-06-2007 19:30:17
1 5
eyy como hago una web

quiero ayuda deme la informacion si fuera muy amable
espero su respuesta

usted es el unico que sabe de esto please ayudame
Comentario usuario
26-12-2007 21:58:57
5 5
Excelente, gracias por este código.
Una pregunta: ¿existe algún atributo de la marquesina que me permita ver la primera imagen tan pronto llego a la última?
No me gusta ver ese espacio blanco entre úlitma y primera imagen.
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.