Foros del Web » Creando para Internet » Diseño web »

Como se hace esto? (Adjunto imagen)

Estas en el tema de Como se hace esto? (Adjunto imagen) en el foro de Diseño web en Foros del Web. Hola, Quisiera saber como hacer para generar el efecto de la imagen que esta al final, en la cual se muestra una ventana en el ...
  #1 (permalink)  
Antiguo 29/08/2007, 08:17
 
Fecha de Ingreso: mayo-2005
Mensajes: 278
Antigüedad: 12 años, 6 meses
Puntos: 3
Pregunta Como se hace esto? (Adjunto imagen)

Hola,

Quisiera saber como hacer para generar el efecto de la imagen que esta al final, en la cual se muestra una ventana en el centro de la pantalla y se produce un efecto de opacar la ventana que esta detras. Este efecto lo quisiera hacer para un link del tipo "Recomendar este articulo", en el cual quisiera que apareciera una ventana en el centro de la pantalla con el formulario para recomendar y que el contenido de la pantalla que esta detras se vuelva mas opaco.
Perdon que no sea mas especifico, pero no se como buscar este efecto en internet, si alguien me puede dar al menos una pista de como encontrar mas informacion o con que se hace (ajax, php, javascript) se los agradecere.

http://www.subirimagenes.com/imagen-...a-1399223.html




Gracias!
  #2 (permalink)  
Antiguo 29/08/2007, 10:36
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Como se hace esto? (Adjunto imagen)

Ese efecto se llama Lightbox.
  #3 (permalink)  
Antiguo 01/09/2007, 10:20
 
Fecha de Ingreso: mayo-2005
Mensajes: 278
Antigüedad: 12 años, 6 meses
Puntos: 3
Re: Como se hace esto? (Adjunto imagen)

Gracias, eso era o que estaba buscando. Tambien encontre mas informacion aqui: http://www.hellogoogle.com/efecto_aj...avascript_css/
  #4 (permalink)  
Antiguo 05/09/2007, 11:17
Avatar de maria lange  
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 61
Antigüedad: 10 años, 3 meses
Puntos: 1
Re: Como se hace esto? (Adjunto imagen)

hola a todos! soy nueva en el foro! estuve viendo lo de lightbox y esta buenisimo. estoy armando una web de un grupo de artistas (yo incluida) que tiene una cantidad bastante grande de imagenes. probe de hacer una galeria en flash con actionscript, pero me parece que esta es una opcion mas bonita para mostrar las obras. mi duda es si al cargar muchas imaenes con este efecto la pagina me va a quedar mucho mas pesada que haciendo una galeria en flash ¿?
espero sus recomendaciones, muchas gracias!
  #5 (permalink)  
Antiguo 05/09/2007, 11:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Re: Como se hace esto? (Adjunto imagen)

Yo cuando he usado lightbox, y creo que todo el mundo también, las imágenes que se muestran (que también pueden ser vínculos de texto) son thumbs, y la imagen grande solo cargaría al llamarla. Así que no creo que tenga que ocupar mas, tal vez todo lo contrario, ya que con flash, a menos que las cargues individualmente, cargas toda la galería e igual no se irán a ver todas las imágenes.
  #6 (permalink)  
Antiguo 05/09/2007, 11:44
Avatar de maria lange  
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 61
Antigüedad: 10 años, 3 meses
Puntos: 1
Re: Como se hace esto? (Adjunto imagen)

buenisimo, entonces voy a usarlo.
aunque estoy viendo el link, y ya hice una prueba y funciona, no me queda bien en claro como usarlo en el dw (el problema es que no entiendo muy bien html)
estoy buscando algun tutorial de lightbox, pero encuentro todo en ingles! si alguien sabe de alguno en español lo agradecere mucho!
saludos
maria
  #7 (permalink)  
Antiguo 05/09/2007, 12:43
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Re: Como se hace esto? (Adjunto imagen)

Uhm... ¿Si te funciona qué mas necesitas? No he usado Dreamweaver, pero supongo que tendrá una vista para ver solo el código, lo implementas ahí y listo.
  #8 (permalink)  
Antiguo 05/09/2007, 12:50
Avatar de maria lange  
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 61
Antigüedad: 10 años, 3 meses
Puntos: 1
Sonrisa Re: Como se hace esto? (Adjunto imagen)

perdon por la insistencia, pero estoy medio perdida...
segui las instrucciones del link que hay un poco mas arriba, y logre poner el lightbox a medias (no se podia clickear en la imagen a agrandar, sino que decia "image" arriba de todo).
busque en el foro y encontre este tema sobre lightbox:

http://www.forosdelweb.com/f53/help-acerca-lightbox-516594/

el problema es que cada vez entiendo menos como hacerlo (perdonen mi ignorancia, soy un poco principiante).

descomprimi el zip. instale el plug in, pero cuando tengo que ir al codigo entiendo poco y nada, alguien puede aconsejarme por donde empezar?
o algun tutorial bien detallado de como hacer funcionar el lightbox???
muchas gracias!
  #9 (permalink)  
Antiguo 05/09/2007, 17:05
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Re: Como se hace esto? (Adjunto imagen)

En ese mismo enlace que das, casualmente, expliqué los pasos a seguir para usar lightbox. En caso de que no te sirva y te defiendas un poco con el inglés, puedes miar esta web, que es la del autor donde explica los pasos a seguir (mucho mas ordenadamente que lo había hecho yo ).

Por lo de la insistencia no te preocupes. Esta comunidad está para ayudar y resolver dudas de todos y entre todos.
  #10 (permalink)  
Antiguo 05/09/2007, 20:45
Avatar de maria lange  
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 61
Antigüedad: 10 años, 3 meses
Puntos: 1
Re: Como se hace esto? (Adjunto imagen)

muchas gracias bonez! voy a seguir tus consejos, a ver si sale esta vez!
  #11 (permalink)  
Antiguo 06/09/2007, 08:16
Avatar de maria lange  
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 61
Antigüedad: 10 años, 3 meses
Puntos: 1
Re: Como se hace esto? (Adjunto imagen)

sigo con el tema del lightbox, jajajaja. ahora estoy en la etapa en que me salio, pero tengo un problema que no puedo resolver: arriba del header de la pagina aparecen los links image#1, image#2 image#3. no entiendo porque el lightbox funciona desde ahi, pero no funciona desdel el thumbail de la imagen, voy a seguir probando (seguro que es un error muuuuuy tonto) pero si alguien me tira alguna pista lo agradezco!!!
  #12 (permalink)  
Antiguo 06/09/2007, 08:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Re: Como se hace esto? (Adjunto imagen)

Uhm... Seguro que tiene rel="lightbox" puestos los enlaces, ¿no? Si no lo solucionas ponnos el códigos a ver que puede ser.
  #13 (permalink)  
Antiguo 06/09/2007, 08:29
Avatar de maria lange  
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 61
Antigüedad: 10 años, 3 meses
Puntos: 1
Re: Como se hace esto? (Adjunto imagen)

el problema es que no entiendo nada de codigo, seguro que algo esta mal ahi, lo paso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


</head>

<body>
<table width="1000" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="1000" height="96" valign="top"><img src="menu.jpg" width="1000" height="158" /></td>
</tr>
<tr>
<td height="504" valign="top"><a href="rel=&quot;lightbox"><img src="camello.jpg" width="354" height="265" border="0" /></a><img src="coco.jpg" width="325" height="243" /><img src="indio.jpg" width="282" height="211" /></td>


<a href="camello.jpg" rel="lightbox[obras]">image #1</a>

<a href="coco.jpg" rel="lightbox[obras]">image #2</a>

<a href="indio.jpg" rel="lightbox[obras]">image #3</a>




</tr>
</table>
</body>
</html>

gracias de nuevo por la ayuda! estoy medio perdida...
  #14 (permalink)  
Antiguo 06/09/2007, 08:42
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Re: Como se hace esto? (Adjunto imagen)

Esto está mal:
Código HTML:
<td height="504" valign="top"><a href="rel=&quot;lightbox"> 
Sería así, como lo tienes mas abajo.
Código HTML:
<td height="504" valign="top"><a href rel="lightbox"> 
  #15 (permalink)  
Antiguo 29/11/2007, 14:34
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.078
Antigüedad: 13 años, 10 meses
Puntos: 9
Re: Como se hace esto? (Adjunto imagen)

Buenas tardes para todos.
Ya probe el "lightbox" y es lo que necesitaba con unas pequeñas dudas.

1. Por cada imagen que ponga debo "editar" y hacer la imagen en miniatura?

2. Hay alguna forma de generar las fotos que uno tenga en miniatura, pues
se imaginan uno tener que hacer este paso cada 8 días a más de 50 fotos?

3. Yo lo voy hacer para un Sitio Web el cual se estarán subiendo imagenes cada 8 días.

4. No se si sea muy descabellado esto otro que deseo hacer.

Para yo ir aumentando cada 8 días este bando de imagenes como hago para
no estar insertando por cada foto la etiqueta

<a href="imagenes/imagen_01.jpg" rel="lightbox[grupo_1]" title="titulo de imagen"><img src="imagenes/imagen_01_mini.jpg" border="0" style="float:left; margin:10px;" /></a>

Sino que por ejemplo uno las ponga en una carpeta y se vayan aumentando progresivamente.
(como se haria esto? un ejemplo que me puedan suministar o web que tenga como hacerlo)

Muchas gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #16 (permalink)  
Antiguo 30/11/2007, 18:13
Avatar de Jowy  
Fecha de Ingreso: febrero-2007
Ubicación: En la red
Mensajes: 232
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Como se hace esto? (Adjunto imagen)

Lo puedes hacer con php.

Haces un script para crear un thumb de cada imagen que subas y asignarle el nombre. Luego con php también, insertas la etiqueta en el html.

Redimensionar imágenes con php
Subir imagen y cambiar nombre



Puedes adaptar los scripts de usados en estos enlaces a tus necesidades...
  #17 (permalink)  
Antiguo 01/12/2007, 06:03
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.078
Antigüedad: 13 años, 10 meses
Puntos: 9
Re: Como se hace esto? (Adjunto imagen)

Ok gracias por tu ayuda Jowy
__________________
Diseñador Gráfico publicitario
  #18 (permalink)  
Antiguo 01/12/2007, 07:26
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.078
Antigüedad: 13 años, 10 meses
Puntos: 9
Re: Como se hace esto? (Adjunto imagen)

Ok ya leí lo que dijiste y tengo dos dudas:
1.http://www.programacionweb.net/artic...iculo/?num=312

Ahí es claro todo, pero como no se ingles ahí piden que desargue algo de este sitio:

http://www.boutell.com

y no se que descargar.

Eso por un lado. Y por el otro yo debo por cada imagen que suba esta etiqueta?

<img src='redimensionar.php?imagen=tu_imagen_origunal.j pg'>

porque como decia voy a subir cada 8 días unas 50 imagenes.

Gracias por tu ayuda

Nota: bastante bueno el enlace para subir imagenes. Lo voy a estudiar y lo implementaré en el sitio que estoy construyendo
__________________
Diseñador Gráfico publicitario
  #19 (permalink)  
Antiguo 01/12/2007, 08:57
Avatar de Jowy  
Fecha de Ingreso: febrero-2007
Ubicación: En la red
Mensajes: 232
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Como se hace esto? (Adjunto imagen)

creo que como ya nos vamos del tema del post sería mejor que plantearas tu duda en el foro de php... ;)
  #20 (permalink)  
Antiguo 01/12/2007, 14:06
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.078
Antigüedad: 13 años, 10 meses
Puntos: 9
Re: Como se hace esto? (Adjunto imagen)

Lo hare.
Pero me puedes decir que es lo que me piden que instale? en el sitio http://www.boutell.com
Que descargo de este sitio Web y en donde está loque descargo.
Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #21 (permalink)  
Antiguo 01/12/2007, 16:20
Avatar de Jowy  
Fecha de Ingreso: febrero-2007
Ubicación: En la red
Mensajes: 232
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Como se hace esto? (Adjunto imagen)

Tienes que tener esa librería de PHP instalada en el server. Para ver si la tienes haz un phpinfo(), sino pide en el hosting la posibilidad de que te la instalen
  #22 (permalink)  
Antiguo 10/12/2007, 08:28
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.078
Antigüedad: 13 años, 10 meses
Puntos: 9
Re: Como se hace esto? (Adjunto imagen)

Hola. Retomando el ightBox.
Yo copio el sitio Web y lo paso a un Mac, aaa sorpresea la que me llevo pues no funciona en el (lo pruebo local) lo pruebo con Safari y nada (Yo copio todo el sitio tal cual lo tengo)
Que pueda ser esto?
__________________
Diseñador Gráfico publicitario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:43.