Retroceder   Foros del Web > Diseño de Sitios web > Web general

Respuesta
 
Herramientas Desplegado
Antiguo 29-ago-2007, 07:17   #1 (permalink)
pacefi está en el buen camino
 
Fecha de Ingreso: mayo-2005
Mensajes: 256
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!
pacefi está desconectado   Responder Citando
Antiguo 29-ago-2007, 09:36   #2 (permalink)
Raulmmmm tiene algunos puntos positivos de karma
 
Avatar de Raulmmmm
 
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.341
Re: Como se hace esto? (Adjunto imagen)

Ese efecto se llama Lightbox.
__________________
Entra aquí para ver mis diseños.
Raulmmmm está desconectado   Responder Citando
Antiguo 01-sep-2007, 09:20   #3 (permalink)
pacefi está en el buen camino
 
Fecha de Ingreso: mayo-2005
Mensajes: 256
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/
pacefi está desconectado   Responder Citando
Antiguo 05-sep-2007, 10:17   #4 (permalink)
maria lange está en el buen camino
 
Avatar de maria lange
 
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 64
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!
maria lange está desconectado   Responder Citando
Antiguo 05-sep-2007, 10:28   #5 (permalink)
Bonez tiene algunos puntos positivos de karma
 
Avatar de Bonez
 
Fecha de Ingreso: noviembre-2002
Mensajes: 2.044
Enviar un mensaje por ICQ a Bonez
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.
Bonez está desconectado   Responder Citando
Antiguo 05-sep-2007, 10:44   #6 (permalink)
maria lange está en el buen camino
 
Avatar de maria lange
 
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 64
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
maria lange está desconectado   Responder Citando
Antiguo 05-sep-2007, 11:43   #7 (permalink)
Bonez tiene algunos puntos positivos de karma
 
Avatar de Bonez
 
Fecha de Ingreso: noviembre-2002
Mensajes: 2.044
Enviar un mensaje por ICQ a Bonez
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.
Bonez está desconectado   Responder Citando
Antiguo 05-sep-2007, 11:50   #8 (permalink)
maria lange está en el buen camino
 
Avatar de maria lange
 
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 64
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!
maria lange está desconectado   Responder Citando
Antiguo 05-sep-2007, 16:05   #9 (permalink)
Bonez tiene algunos puntos positivos de karma
 
Avatar de Bonez
 
Fecha de Ingreso: noviembre-2002
Mensajes: 2.044
Enviar un mensaje por ICQ a Bonez
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.
Bonez está desconectado   Responder Citando
Antiguo 05-sep-2007, 19:45   #10 (permalink)
maria lange está en el buen camino
 
Avatar de maria lange
 
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 64
Re: Como se hace esto? (Adjunto imagen)

muchas gracias bonez! voy a seguir tus consejos, a ver si sale esta vez!
maria lange está desconectado   Responder Citando
Antiguo 06-sep-2007, 07:16   #11 (permalink)
maria lange está en el buen camino
 
Avatar de maria lange
 
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 64
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!!!
maria lange está desconectado   Responder Citando
Antiguo 06-sep-2007, 07:24   #12 (permalink)
Bonez tiene algunos puntos positivos de karma
 
Avatar de Bonez
 
Fecha de Ingreso: noviembre-2002
Mensajes: 2.044
Enviar un mensaje por ICQ a Bonez
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.
Bonez está desconectado   Responder Citando
Antiguo 06-sep-2007, 07:29   #13 (permalink)
maria lange está en el buen camino
 
Avatar de maria lange
 
Fecha de Ingreso: septiembre-2007
Ubicación: argentina
Mensajes: 64
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...
maria lange está desconectado   Responder Citando
Antiguo 06-sep-2007, 07:42   #14 (permalink)
Bonez tiene algunos puntos positivos de karma
 
Avatar de Bonez
 
Fecha de Ingreso: noviembre-2002
Mensajes: 2.044
Enviar un mensaje por ICQ a Bonez
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">
Bonez está desconectado   Responder Citando
Antiguo 29-nov-2007, 13:34   #15 (permalink)
ceaped está en el buen camino
 
Avatar de ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.077
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 y Publicitario
ceaped está desconectado   Responder Citando
Antiguo 30-nov-2007, 17:13   #16 (permalink)
Jowy no se puede cailificar en este momento
 
Avatar de Jowy
 
Fecha de Ingreso: febrero-2007
Ubicación: En la red
Mensajes: 220
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...
Jowy está desconectado   Responder Citando
Antiguo 01-dic-2007, 05:03   #17 (permalink)
ceaped está en el buen camino
 
Avatar de ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.077
Re: Como se hace esto? (Adjunto imagen)

Ok gracias por tu ayuda Jowy
__________________
Diseñador Gráfico y Publicitario
ceaped está desconectado   Responder Citando
Antiguo 01-dic-2007, 06:26   #18 (permalink)
ceaped está en el buen camino
 
Avatar de ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.077
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 y Publicitario
ceaped está desconectado   Responder Citando
Antiguo 01-dic-2007, 07:57   #19 (permalink)
Jowy no se puede cailificar en este momento
 
Avatar de Jowy
 
Fecha de Ingreso: febrero-2007
Ubicación: En la red
Mensajes: 220
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... ;)
Jowy está desconectado   Responder Citando
Antiguo 01-dic-2007, 13:06   #20 (permalink)
ceaped está en el buen camino
 
Avatar de ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.077
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 y Publicitario
ceaped está desconectado   Responder Citando
Antiguo 01-dic-2007, 15:20   #21 (permalink)
Jowy no se puede cailificar en este momento
 
Avatar de Jowy
 
Fecha de Ingreso: febrero-2007
Ubicación: En la red
Mensajes: 220
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
Jowy está desconectado   Responder Citando
Antiguo 10-dic-2007, 07:28   #22 (permalink)
ceaped está en el buen camino
 
Avatar de ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.077
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 y Publicitario
ceaped está desconectado   Responder Citando
Respuesta

No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 18:46.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93