Como se hace esto? (Adjunto imagen)

pacefi · #1 (**permalink**) 29/08/2007, 07:17

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!

Raulmmmm · #2 (**permalink**) 29/08/2007, 09:36

Ese efecto se llama Lightbox.

pacefi · #3 (**permalink**) 01/09/2007, 09:20

Gracias, eso era o que estaba buscando. Tambien encontre mas informacion aqui: http://www.hellogoogle.com/efecto_aj...avascript_css/

maria lange · #4 (**permalink**) 05/09/2007, 10:17

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!

pzin · #5 (**permalink**) 05/09/2007, 10:28

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.

maria lange · #6 (**permalink**) 05/09/2007, 10:44

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

pzin · #7 (**permalink**) 05/09/2007, 11:43

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.

maria lange · #8 (**permalink**) 05/09/2007, 11:50

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!

pzin · #9 (**permalink**) 05/09/2007, 16:05

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.

maria lange · #10 (**permalink**) 05/09/2007, 19:45

muchas gracias bonez! voy a seguir tus consejos, a ver si sale esta vez!

maria lange · #11 (**permalink**) 06/09/2007, 07:16

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!!!

pzin · #12 (**permalink**) 06/09/2007, 07:24

Uhm... Seguro que tiene rel="lightbox" puestos los enlaces, ¿no? Si no lo solucionas ponnos el códigos a ver que puede ser.

maria lange · #13 (**permalink**) 06/09/2007, 07:29

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í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">

<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="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...

pzin · #14 (**permalink**) 06/09/2007, 07:42

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">

ceaped · #15 (**permalink**) 29/11/2007, 14:34

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

Jowy · #16 (**permalink**) 30/11/2007, 18:13

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...

ceaped · #17 (**permalink**) 01/12/2007, 06:03

Ok gracias por tu ayuda Jowy

ceaped · #18 (**permalink**) 01/12/2007, 07:26

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

Jowy · #19 (**permalink**) 01/12/2007, 08:57

creo que como ya nos vamos del tema del post sería mejor que plantearas tu duda en el foro de php... ;)

ceaped · #20 (**permalink**) 01/12/2007, 14:06

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

Jowy · #21 (**permalink**) 01/12/2007, 16:20

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

ceaped · #22 (**permalink**) 10/12/2007, 08:28

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?