Como usar Lightbox en Dreamweaver

_CesaR_ · #1 (**permalink**) 12/09/2008, 16:06

Hola, escuche hablar de un programa llamado Lightbox que hacer que las imagenes pequellas al darle clic se abra una especie de popup muy elegante.

Ahora mi problema es que no se como usarlo en Dreamweaver CS3, e probado muchas formas pero no puedo.

Entonces quisiera saber si alguien me puede explicar paso a paso como usarlo.

Se los agradeceria mucho

por favor

Gracias por adelantado

pao01 · #2 (**permalink**) 12/09/2008, 17:19

Fíjate a ver si esto te sirve.
Aquí otro más.

juaniquillo · #3 (**permalink**) 12/09/2008, 18:42

tienes que meterte en la vista de código y pegar/edita el javascript correspondiente. no hay nbinguna función 'lightbox' para DW. Si nos muestras lo que tienes te podríamos ayudar mejor.

_CesaR_ · #4 (**permalink**) 12/09/2008, 21:29

Si ya me se los codigos, el problema es que no se en que parte del codigo de la pagina ponerlo

Este es el codigo de la pagina en donde quiero usar el efecto Lightbox

Cita:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>

<body>
<table width="780" height="326" border="0" align="center" bordercolor="#181818" bgcolor="#131212">
<tr>
<td><img src="Imagenes/header_saggazze.gif" alt="Famiglia Saggazze" width="749" height="300" hspace="10" /></td>
</tr>
</table>
<table width="780" border="0" align="center" cellspacing="0" bordercolor="#151515">
<tr>
<td colspan="2"> <a href="index.html"><img src="Imagenes/boton_principal_1.gif" alt="principal" width="99" height="65" border="0" /></a><a href="Imagenes/Galeria/Nueva carpeta/petadas.html"><img src="Imagenes/boton_petadas_2.gif" alt="Petadas" width="99" height="65" border="0" /></a><a href="sobre_saggazze.html"><img src="Imagenes/boton_sobre_3.gif" alt="Sobre Saggazze" width="99" height="65" border="0" /></a><img src="Imagenes/boton_rangos_4.gif" alt="Rangos y Vestimenta" width="99" height="65" /><a href="contactanos.html"><img src="Imagenes/boton_contact_5.gif" alt="Contactanos" width="94" height="65" border="0" /></a></td>
<td bgcolor="#151515"> </td>
</tr>

<tr>
<td width="280" height="73"><img src="Imagenes/saggazze_grazie.gif" alt="Grazie" width="271" height="132" /></td>
<td width="486" rowspan="3" bgcolor="#0D0D0D"><p align="center"><strong>Asociato<br />
</strong><img src="Imagenes/Vestimenta de Rangos/Asociato/pareja_asociato.gif" alt="Asociato" width="95" height="105" hspace="200" /></p>
<blockquote>
<p align="center">El asociato es el primer rango, con el que empezarás a trabajar.<br />
Con este rango te encargarás de ayduar a conseguir empleo a la gente que llegue a la sala, explicales cual es la vestimenta, cual es la misión y cual es la placa que deben usar.<br />
Recuerda tratar a los clientes con amabilidad.</p>
<p><strong>Vestimenta:</strong> <a href="#" onclick="MM_openBrWindow('Imagenes/Vestimenta de Rangos/Asociato/hombre_big.gif','HombreAsociato','width=451,height =414')">Hombre</a> - <a href="#" onclick="MM_openBrWindow('Imagenes/Vestimenta de Rangos/Asociato/mujer_big.gif','MujerAsociato','width=447,height=4 08')">Mujer</a> (clic para ver imagen)</p>
<p><strong>Misión:</strong> Asociato [Saggazze]</p>
<p><strong>Rango siguiente:</strong> Soldato</p>
<p><strong>Placa:</strong> Deberás portar la placa roja</p>
<p align="left"><strong>Debes tener en cuenta que:</strong></p>
</blockquote>
<ul>
<li>Para la misión recuerda respetar las mayúsculas, minúsculas y corchetes.</li>
<li>Debes obedecer a los rangos superiores, de no ser así, serás sancionado.</li>
<li>Para los corchetes presiona Alt+91 para [ y Alt+93 para ]</li>
<li>Resivirás paga, siempre y cuando te destaques entre los demas trabajadores, recuerda que se les paga a los 5 mejores.</li>
<li>No estan permitidos los accesorios.</li>
</ul>
<div>
<div align="right"></div>
</div> <p> </p></td>
<td width="8" rowspan="3" bgcolor="#151515"> </td>
</tr>
<tr>
<td height="156" bordercolor="#FFFFFF" bgcolor="#151515"><div align="center"> <strong>Lista de rangos</strong><strong></strong></div>
<ul><li>Soldato</li>
<li>Sicario</li>
<li>Esecutore</li>
<li>Muscle</li>
<li>Proxeneta</li>
<li>Capodecine</li>
<li>Caporegime</li>
</ul></td>
</tr>
<tr>
<td height="178" bgcolor="#151515"><div align="center">
<p><img src="Imagenes/silla_mamut.gif" alt="Saggazze's Style" width="200" height="117" hspace="40" /></p>
<p><img src="Imagenes/saggazze_style_texto.gif" alt="Saggazze Style" width="250" height="40" /><br />
</p>
</div></td>
</tr>

<tr>
<td height="27" colspan="3" bgcolor="#151515"><div align="center" class="Estilo9">Copyright @ 2008, www.saggazze.com, todos los derechos reservados.</div></td>
</tr>
</table>
</body>
</html>

Y segun las instrucciones tengo que hacer esto:

Para utilizar Lightbox lo primero es descargar la versión actual. Lightbox utiliza las librerias Prototype y Scriptaculous. Entonces necesitas incluir estar librerías en el head de tu html.

Cita:

HTML:

1.
<script type="text/javascript" src="js/prototype.js"></script>
2.
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
3.
<script type="text/javascript" src="js/lightbox.js"></script>

El siguiente paso es incluir la hoja de estilos para que Lightbox tenga la apariencia deseada, para ello incluimos los estilos en el header del html que estamos creando.

Cita:

HTML:

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

El paso final para utilizar Lightbox es agregar la propiedad rel="lightbox" a los enlaces que deseamos que abran una ventana flotante con la imagen. La propiedad href indicará que imagen se abrirá, la propiedad title sera el titulo de la ventana.

Cita:

HTML:

1.
<a href="imagen.jpg" rel="lightbox" title="Titulo">Imagen</a>

-------------------------------------------------------------------------------------------------

El problema es que no se en donde pegar esos codigos, ya me baje el programa y todo, pero no se que hacer con esos codigos en que parte los tengo que pegar.

Espero que me puedan ayudar :(

michaelc · #5 (**permalink**) 12/09/2008, 23:09

Hola,

Debes colocar los códigos que te indican antes que finalice la etiqueta </head>, asi:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
}
body {
background-color: #0d0d0d;
}
a:link {
text-decoration: none;
color: #CCCCCC;
}
a:visited {
text-decoration: none;
color: #666666;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.Estilo9 {
font-size: 11px;
color: #999999;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>

<body>
<table width="780" height="326" border="0" align="center" bordercolor="#181818" bgcolor="#131212">
<tr>
<td><img src="Imagenes/header_saggazze.gif" alt="Famiglia Saggazze" width="749" height="300" hspace="10" /></td>
</tr>
</table>
<table width="780" border="0" align="center" cellspacing="0" bordercolor="#151515">
<tr>
<td colspan="2"> <a href="index.html"><img src="Imagenes/boton_principal_1.gif" alt="principal" width="99" height="65" border="0" /></a><a href="Imagenes/Galeria/Nueva carpeta/petadas.html"><img src="Imagenes/boton_petadas_2.gif" alt="Petadas" width="99" height="65" border="0" /></a><a href="sobre_saggazze.html"><img src="Imagenes/boton_sobre_3.gif" alt="Sobre Saggazze" width="99" height="65" border="0" /></a><img src="Imagenes/boton_rangos_4.gif" alt="Rangos y Vestimenta" width="99" height="65" /><a href="contactanos.html"><img src="Imagenes/boton_contact_5.gif" alt="Contactanos" width="94" height="65" border="0" /></a></td>
<td bgcolor="#151515">&nbsp;</td>
</tr>

<tr>
<td width="280" height="73"><img src="Imagenes/saggazze_grazie.gif" alt="Grazie" width="271" height="132" /></td>
<td width="486" rowspan="3" bgcolor="#0D0D0D"><p align="center"><strong>Asociato<br />
</strong><img src="Imagenes/Vestimenta de Rangos/Asociato/pareja_asociato.gif" alt="Asociato" width="95" height="105" hspace="200" /></p>
<blockquote>
<p align="center">El asociato es el primer rango, con el que empezarás a trabajar.<br />
Con este rango te encargarás de ayduar a conseguir empleo a la gente que llegue a la sala, explicales cual es la vestimenta, cual es la misión y cual es la placa que deben usar.<br />
Recuerda tratar a los clientes con amabilidad.</p>
<p><strong>Vestimenta:</strong> <a href="#" onclick="MM_openBrWindow('Imagenes/Vestimenta de Rangos/Asociato/hombre_big.gif','HombreAsociato','width=451,height =414')">Hombre</a> - <a href="#" onclick="MM_openBrWindow('Imagenes/Vestimenta de Rangos/Asociato/mujer_big.gif','MujerAsociato','width=447,height=4 08')">Mujer</a> (clic para ver imagen)</p>
<p><strong>Misión:</strong> Asociato [Saggazze]</p>
<p><strong>Rango siguiente:</strong> Soldato</p>
<p><strong>Placa:</strong> Deberás portar la placa roja</p>
<p align="left"><strong>Debes tener en cuenta que:</strong></p>
</blockquote>
<ul>
<li>Para la misión recuerda respetar las mayúsculas, minúsculas y corchetes.</li>
<li>Debes obedecer a los rangos superiores, de no ser así, serás sancionado.</li>
<li>Para los corchetes presiona Alt+91 para [ y Alt+93 para ]</li>
<li>Resivirás paga, siempre y cuando te destaques entre los demas trabajadores, recuerda que se les paga a los 5 mejores.</li>
<li>No estan permitidos los accesorios.</li>
</ul>
<div>
<div align="right"></div>
</div> <p>&nbsp;</p></td>
<td width="8" rowspan="3" bgcolor="#151515">&nbsp;</td>
</tr>
<tr>
<td height="156" bordercolor="#FFFFFF" bgcolor="#151515"><div align="center"> <strong>Lista de rangos</strong><strong></strong></div>
<ul><li>Soldato</li>
<li>Sicario</li>
<li>Esecutore</li>
<li>Muscle</li>
<li>Proxeneta</li>
<li>Capodecine</li>
<li>Caporegime</li>
</ul></td>
</tr>
<tr>
<td height="178" bgcolor="#151515"><div align="center">
<p><img src="Imagenes/silla_mamut.gif" alt="Saggazze's Style" width="200" height="117" hspace="40" /></p>
<p><img src="Imagenes/saggazze_style_texto.gif" alt="Saggazze Style" width="250" height="40" /><br />
</p>
</div></td>
</tr>


<tr>
<td height="27" colspan="3" bgcolor="#151515"><div align="center" class="Estilo9">Copyright @ 2008, www.saggazze.com, todos los derechos reservados.</div></td>
</tr>
</table>
<br /><div style="z-index:3" class="smallfont" align="center"><!-- google_ad_section_start(weight=ignore) -->LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.1.0<!-- google_ad_section_end --></div></body>
</html>

Ahora bien para que puedas poner una miniatura y al hacer clic se abra con el lightbox simplemente debes con el Dreamweaver insertar la miniatura normalmente, luego vas hacer un link que llame a la foto grande desde la miniatura. Una vez que hayas hecho eso vete a la vista de código justamente al código de tu miniatura veras un código así:

Código HTML:

<a href="imagen.jpg" title="Titulo">Imagen</a>

Simplemente agregale dentro de la etiqueta <a> esto:

Código HTML:

rel="lightbox"

, quedando asi:

Código HTML:

<a href="imagen.jpg" title="Titulo" rel="lightbox">Imagen</a>

Si deseas ponerle un titulo a la foto al abrir, asi como ingresas

Código HTML:

rel="lightbox"

, debes poner

Código HTML:

title="aqui va tu titulo"

¡Eso es todo!

_CesaR_ · #6 (**permalink**) 13/09/2008, 03:26

Ok mira hise lo que dijiste pero no fuinciono

.

Copie el codigo

Código HTML:

<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Y lo pegue justo antes de </head> como me dijiste, luego a la miniatura la enlace con una imagen que tenia en una carpeta (dandole al boton de abajo "vinculo")

Luego el codigo de la imagen quedo así

Código HTML:

<a href="Imagenes/Vestimenta de Rangos/Asociato/mujer_big.gif"><img src="Imagenes/Vestimenta de Rangos/Asociato/pareja_asociato.gif" alt="Asociato" width="95" height="105" hspace="200" border="0" /></a>

Y le agregue como me dijiste esto

Código HTML:

rel="lightbox"

Y quedó así

Código HTML:

<a href="Imagenes/Vestimenta de Rangos/Asociato/mujer_big.gif" rel="lightbox"><img src="Imagenes/Vestimenta de Rangos/Asociato/pareja_asociato.gif" alt="Asociato" width="95" height="105" hspace="200" border="0" /></a>

Entonces le doy Vista previa en Firefox y en Internet explorer pero no me abre en forma de popup sino de la forma antigua, es decir sale la imagen sola (la grande) en una nueva pagina.

Segun tengo entendido habia que agregar algo de CSS, pero no se, dime tu...

Otra cosa, aqui te dejo de nuevo el codigo completo con lo que hise:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}
body {
	background-color: #0d0d0d;
}
a:link {
	text-decoration: none;
	color: #CCCCCC;
}
a:visited {
	text-decoration: none;
	color: #666666;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
.Estilo9 {
	font-size: 11px;
	color: #999999;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
<script type="text/javascript" src="../../../Saggazze Web/js/prototype.js"></script>
<script type="text/javascript" src="../../../Saggazze Web/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../../../Saggazze Web/js/lightbox.js"></script>
<link rel="stylesheet" href="Saggazze Web/css/lightbox.css" type="text/css" media="screen" />
</head>

<body>
<table width="780" height="326" border="0" align="center" bordercolor="#181818" bgcolor="#131212">
  <tr>
    <td><img src="../../../Saggazze Web/Imagenes/header_saggazze.gif" alt="Famiglia Saggazze" width="749" height="300" hspace="10" /></td>
  </tr>
</table>
<table width="780" border="0" align="center" cellspacing="0" bordercolor="#151515">
  <tr>
    <td colspan="2">**********************************<a href="Saggazze Web/index.html"><img src="../../../Saggazze Web/Imagenes/boton_principal_1.gif" alt="principal" width="99" height="65" border="0" /></a><a href="Saggazze Web/Imagenes/Galeria/Nueva carpeta/petadas.html"><img src="../../../Saggazze Web/Imagenes/boton_petadas_2.gif" alt="Petadas" width="99" height="65" border="0" /></a><a href="Saggazze Web/sobre_saggazze.html"><img src="../../../Saggazze Web/Imagenes/boton_sobre_3.gif" alt="Sobre Saggazze" width="99" height="65" border="0" /></a><img src="../../../Saggazze Web/Imagenes/boton_rangos_4.gif" alt="Rangos y Vestimenta" width="99" height="65" /><a href="Saggazze Web/contactanos.html"><img src="../../../Saggazze Web/Imagenes/boton_contact_5.gif" alt="Contactanos" width="94" height="65" border="0" /></a></td>
    <td bgcolor="#151515">&nbsp;</td>
  </tr>
  
  <tr>
    <td width="280" height="73"><img src="../../../Saggazze Web/Imagenes/saggazze_grazie.gif" alt="Grazie" width="271" height="132" /></td>
    <td width="486" rowspan="3" bgcolor="#0D0D0D"><p align="center"><strong>Asociato<br />
    </strong><a href="Saggazze Web/Imagenes/Vestimenta de Rangos/Asociato/mujer_big.gif" rel="lightbox"><img src="../../../Saggazze Web/Imagenes/Vestimenta de Rangos/Asociato/pareja_asociato.gif" alt="Asociato" width="95" height="105" hspace="200" border="0" /></a></p>
      <blockquote>
        <p align="center">El asociato es el primer rango, con el que empezarás a trabajar.<br />
        Con este rango te encargarás de ayduar a conseguir empleo a la gente que llegue a la sala, explicales cual es la vestimenta, cual es la misión y cual es la placa que deben usar.<br />
        Recuerda tratar a los clientes con amabilidad.</p>
        <p><strong>Vestimenta:</strong> <a href="#" onclick="MM_openBrWindow('../../../Saggazze Web/Imagenes/Vestimenta de Rangos/Asociato/hombre_big.gif','HombreAsociato','width=451,height=414')">Hombre</a> - <a href="#" onclick="MM_openBrWindow('../../../Saggazze Web/Imagenes/Vestimenta de Rangos/Asociato/mujer_big.gif','MujerAsociato','width=447,height=408')">Mujer</a> (clic para ver imagen)</p>
        <p><strong>Misión:</strong> Asociato [Saggazze]</p>
        <p><strong>Rango siguiente:</strong> Soldato</p>
        <p><strong>Placa:</strong> Deberás portar la placa roja</p>
        <p align="left"><strong>Debes tener en cuenta que:</strong></p>
      </blockquote>
      <ul>
        <li>Para la misión recuerda respetar las mayúsculas, minúsculas y corchetes.</li>
        <li>Debes obedecer a los rangos superiores, de no ser así, serás sancionado.</li>
        <li>Para los corchetes presiona Alt+91 para [ y Alt+93 para ]</li>
        <li>Resivirás paga, siempre y cuando te destaques entre los demas trabajadores, recuerda que se les paga a los 5 mejores.</li>
        <li>No estan permitidos los accesorios.</li>
      </ul>
      <div>
      <div align="right"></div>
    </div> <p>&nbsp;</p></td>
    <td width="8" rowspan="3" bgcolor="#151515">&nbsp;</td>
  </tr>
  <tr>
    <td height="156" bordercolor="#FFFFFF" bgcolor="#151515"><div align="center"> <strong>Lista de rangos</strong><strong></strong></div>
      <ul><li>Soldato</li>
        <li>Sicario</li>
        <li>Esecutore</li>
        <li>Muscle</li>
        <li>Proxeneta</li>
        <li>Capodecine</li>
        <li>Caporegime</li>
    </ul></td>
  </tr>
  <tr>
    <td height="178" bgcolor="#151515"><div align="center">
      <p><img src="../../../Saggazze Web/Imagenes/silla_mamut.gif" alt="Saggazze's Style" width="200" height="117" hspace="40" /></p>
      <p><img src="../../../Saggazze Web/Imagenes/saggazze_style_texto.gif" alt="Saggazze Style" width="250" height="40" /><br />
        </p>
    </div></td>
  </tr>
  
  
  <tr>
    <td height="27" colspan="3" bgcolor="#151515"><div align="center" class="Estilo9">Copyright @ 2008, www.saggazze.com, todos los derechos reservados.</div></td>
  </tr>
</table>
</body>
</html>

Espero qeu me puedas decir que hize mal, gracias por tu ayuda

juaniquillo · #7 (**permalink**) 13/09/2008, 10:47

¿tienes los archivos del lightbox en tu carpeta root (raíz)? lo mas seguro que es un problema de tus rutas. has una carpeta dentro de tu root llamada 'js' (sin comillas) y pon ahí los archivos:
prototype.js, scriptaculous.js y lightbox.js.

Y otra carpeta llamada 'css' y dentro por el archivo:
lightbox.css

Entonces cambia el código que tienes por este:

Código HTML:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<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>

_CesaR_ · #8 (**permalink**) 13/09/2008, 11:31

Ok mira lo uqe hice:

1) puse exactamente donde me dijiste los archivos, ya los archivos estaban en la carpeta raiz, pero dentro de una subcarpeta llamada "lightbox"

Pero todo seguia igual, la imagen se abria sola, en una nueva pagina.

Entonces lo que hice fue experimentar un poco

Si la codigo era este :

Código HTML:

 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<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>

Lo que hise fue cambiarle la ruta src asi

Código HTML:

<link rel="stylesheet" href="../../../Saggazze Web/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../../Saggazze Web/js/prototype.js"></script>
<script type="text/javascript" src="../../../Saggazze Web/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../../../Saggazze Web/js/lightbox.js"></script>

Pero al momento de darle vista previa en firefox, le doy clic en la miniatura y no pasa nada, y en IE cuando doy clic sale abajo "Error de pagina" y si esta todo bien, la imagen vinculada, el rel="lightbox", todo copiado antes de </head>.

Yo me imagino que por lo menos se avanzo un poco, pero pues no se abre, alguien me puedes decir que puedo hacer.

Aqui otra ves el codigo completo con lo que hice:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}
body {
	background-color: #0d0d0d;
}
a:link {
	text-decoration: none;
	color: #CCCCCC;
}
a:visited {
	text-decoration: none;
	color: #666666;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
.Estilo9 {
	font-size: 11px;
	color: #999999;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
<link rel="stylesheet" href="../../../Saggazze Web/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../../Saggazze Web/js/prototype.js"></script>
<script type="text/javascript" src="../../../Saggazze Web/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../../../Saggazze Web/js/lightbox.js"></script>
</head>

<body>
<table width="780" height="326" border="0" align="center" bordercolor="#181818" bgcolor="#131212">
  <tr>
    <td><img src="../../../Saggazze Web/Imagenes/header_saggazze.gif" alt="Famiglia Saggazze" width="749" height="300" hspace="10" /></td>
  </tr>
</table>
<table width="780" border="0" align="center" cellspacing="0" bordercolor="#151515">
  <tr>
    <td colspan="2">**********************************<a href="Saggazze Web/index.html"><img src="../../../Saggazze Web/Imagenes/boton_principal_1.gif" alt="principal" width="99" height="65" border="0" /></a><a href="Saggazze Web/Imagenes/Galeria/Nueva carpeta/petadas.html"><img src="../../../Saggazze Web/Imagenes/boton_petadas_2.gif" alt="Petadas" width="99" height="65" border="0" /></a><a href="Saggazze Web/sobre_saggazze.html"><img src="../../../Saggazze Web/Imagenes/boton_sobre_3.gif" alt="Sobre Saggazze" width="99" height="65" border="0" /></a><img src="../../../Saggazze Web/Imagenes/boton_rangos_4.gif" alt="Rangos y Vestimenta" width="99" height="65" /><a href="Saggazze Web/contactanos.html"><img src="../../../Saggazze Web/Imagenes/boton_contact_5.gif" alt="Contactanos" width="94" height="65" border="0" /></a></td>
    <td bgcolor="#151515">&nbsp;</td>
  </tr>
  
  <tr>
    <td width="280" height="73"><img src="../../../Saggazze Web/Imagenes/saggazze_grazie.gif" alt="Grazie" width="271" height="132" /></td>
    <td width="486" rowspan="3" bgcolor="#0D0D0D"><p align="center"><strong>Asociato<br />
    </strong><a href="Saggazze Web/Imagenes/Vestimenta de Rangos/Asociato/hombre_big.gif" rel="lightbox" ><img src="../../../Saggazze Web/Imagenes/Vestimenta de Rangos/Asociato/pareja_asociato.gif" alt="Asociato" width="95" height="105" hspace="200" border="0" /></a></p>
      <blockquote>
        <p align="center">El asociato es el primer rango, con el que empezarás a trabajar.<br />
        Con este rango te encargarás de ayduar a conseguir empleo a la gente que llegue a la sala, explicales cual es la vestimenta, cual es la misión y cual es la placa que deben usar.<br />
        Recuerda tratar a los clientes con amabilidad.</p>
        <p><strong>Vestimenta:</strong> <a href="#" onclick="MM_openBrWindow('../../../Saggazze Web/Imagenes/Vestimenta de Rangos/Asociato/hombre_big.gif','HombreAsociato','width=451,height=414')">Hombre</a> - <a href="#" onclick="MM_openBrWindow('../../../Saggazze Web/Imagenes/Vestimenta de Rangos/Asociato/mujer_big.gif','MujerAsociato','width=447,height=408')">Mujer</a> (clic para ver imagen)</p>
        <p><strong>Misión:</strong> Asociato [Saggazze]</p>
        <p><strong>Rango siguiente:</strong> Soldato</p>
        <p><strong>Placa:</strong> Deberás portar la placa roja</p>
        <p align="left"><strong>Debes tener en cuenta que:</strong></p>
      </blockquote>
      <ul>
        <li>Para la misión recuerda respetar las mayúsculas, minúsculas y corchetes.</li>
        <li>Debes obedecer a los rangos superiores, de no ser así, serás sancionado.</li>
        <li>Para los corchetes presiona Alt+91 para [ y Alt+93 para ]</li>
        <li>Resivirás paga, siempre y cuando te destaques entre los demas trabajadores, recuerda que se les paga a los 5 mejores.</li>
        <li>No estan permitidos los accesorios.</li>
      </ul>
      <div>
      <div align="right"></div>
    </div> <p>&nbsp;</p></td>
    <td width="8" rowspan="3" bgcolor="#151515">&nbsp;</td>
  </tr>
  <tr>
    <td height="156" bordercolor="#FFFFFF" bgcolor="#151515"><div align="center"> <strong>Lista de rangos</strong><strong></strong></div>
      <ul><li>Soldato</li>
        <li>Sicario</li>
        <li>Esecutore</li>
        <li>Muscle</li>
        <li>Proxeneta</li>
        <li>Capodecine</li>
        <li>Caporegime</li>
    </ul></td>
  </tr>
  <tr>
    <td height="178" bgcolor="#151515"><div align="center">
      <p><img src="../../../Saggazze Web/Imagenes/silla_mamut.gif" alt="Saggazze's Style" width="200" height="117" hspace="40" /></p>
      <p><img src="../../../Saggazze Web/Imagenes/saggazze_style_texto.gif" alt="Saggazze Style" width="250" height="40" /><br />
        </p>
    </div></td>
  </tr>
  
  
  <tr>
    <td height="27" colspan="3" bgcolor="#151515"><div align="center" class="Estilo9">Copyright @ 2008, www.saggazze.com, todos los derechos reservados.</div></td>
  </tr>
</table>
</body>
</html>

Por cierto a la miniatura no le puedo hacer nada, ni clic con el boton derecho, nada.

Saludos

juaniquillo · #9 (**permalink**) 13/09/2008, 12:44

Todavía no entiendo porque usas el '../../../Saggazze Web/'. La ruta tiene que ser exacta. no puede haber otra carpeta. Si la raíz de tu site es 'Saggazze Web' entonces la ruta de los archivos deben ser:

Código:

js/archivo

También, la ruta de tus imágenes deben ser:

Código:

Imagenes/imagen

Y otra cosa, a las miniaturas necesitas enlazarla a imágenes que sean versiones mas grandes de las mismas. Entonces en el enlace debes poner el atributo:

Código:

rel="lightbox"

Triby · #10 (**permalink**) 13/09/2008, 16:23

Me gusta más JQuery que Prototype y el Lightbox es mucho más "Light" y fácil: http://leandrovieira.com/projects/jquery/lightbox/

feral · #11 (**permalink**) 13/09/2008, 16:55

Dreamweaver no integra en sus comportamientos predeterminados lightbox, aunque se puede crear un objeto de dreamweaver a modo de extension que si lo haga, puede que alguien lo haya hecho, para eso tendras que mirar en la pagina de extensiones de Adobe.

De todas formas la implementacion de lightbox es muy sencilla, si quieres aligerar tiempo se puede crear un fragmento o tambien un elemento de biblioteca, asi simplemente con dar al boton insertar dentro de head se copian automaticamente los elementos script y link necesarios y solo tendrias que copiar las carpetas donde residen los archivos js y css dentro de la carpeta raiz del sitio, actualizar vinculos y añadir atributos rel y title en vista codigo

_CesaR_ · #12 (**permalink**) 13/09/2008, 18:45

Cita:

Iniciado por juaniquillo

Todavía no entiendo porque usas el '../../../Saggazze Web/'. La ruta tiene que ser exacta. no puede haber otra carpeta. Si la raíz de tu site es 'Saggazze Web' entonces la ruta de los archivos deben ser:

Código:

js/archivo

También, la ruta de tus imágenes deben ser:

Código:

Imagenes/imagen

Y otra cosa, a las miniaturas necesitas enlazarla a imágenes que sean versiones mas grandes de las mismas. Entonces en el enlace debes poner el atributo:

Código:

rel="lightbox"

Yo lo que hise fue por experimentar, porque no funciona, sigo paso a paso lo que me dices y nada la imagen sigue abriendose en una ventana aparte.

Otra cosa para poderlo ver tiene que estar ya la pagina subida al servidor o no es necesario?

Si no es lightbox no hay otro que sea parecido y mas sencillo a ver si funciona?

Gracias

_CesaR_ · #13 (**permalink**) 17/09/2008, 11:57

Hola, les escribo para decirles que ya logre utilizar el lightbox en el Dreamweaver CS3, para los que tengan la misma duda les explico que hise.

Primero puse los archivos qu evienen al descargar el lightbox en la carpeta raiz, sin ninguna otra subcarpeta ni nada.

Lo siguiente que hise fue abrir el archivo "index" que viene en el ZIP del programa y copie el codigo directamente del codigo de fuente de esa pagina.

El codigo es el siguiente:

Código HTML:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript" </script>
<script src="js/lightbox.js" type="text/javascript"></script>

y lo pegue justo antes de

Código HTML:

</head>

debes asegurarte que ninguno de los codigos aparezca todo color rosa, eso significa que no funciona.

Despues me fui a vista de "Diseño" y luego vinculo la imagen que deseo con otra usando la herramienta de vincular de Dreamwever, lo siguiente es seleccionar la miniatura y darle a vista de "Codigo" y veremos un codigo parecido a este:

Código HTML:

<a href="imagen que va a salir en el lightbox"><img src="imagen miniatura que esta en la web" alt="texto alternativo que te pide dreamweaver" width="95" height="105" />

y debes poner lo siguiente:

Código HTML:

rel="lightbox"

Justo despues de el link que esta despues de "href" y antes del > así

Código:

<a href="imagen que va a salir en el lightbox" rel="lightbox"><img src="imagen miniatura que esta en la web" alt="texto alternativo que te pide dreamweaver" width="95" height="105" />

y asi te deberia servir, ahora si tambien quieres poner una descripcion a la imagen, añade title="la descripcion de la imagen" al lado de rel="lightbox" así

Código:

<a href="imagen que va a salir en el lightbox" rel="lightbox" title="la descripcion de la imagen" ><img src="imagen miniatura que esta en la web" alt="texto alternativo que te pide dreamweaver" width="95" height="105" />

Espero que me allan entendido los que tambien tienen dudas y que les sirva, y gracias a los que intentaron ayudarme

HerbugStudio · #14 (**permalink**) 13/11/2008, 11:14

Hola
acabo de hacerlo como dijo _CesaR_ y me funciona perfecto...
Pero tengo una pregunta, lightbox funciona solo con firefox? porque ni en explorer ni en opera me funcionan

Saludos

kaninox · #15 (**permalink**) 13/11/2008, 13:01

pues lightbox según tengo entendido funciona en todos los navegadores, por lo menos los mas usados como firefox e IE, asi que debe ser otro tu problema.....

saludos

HerbugStudio · #16 (**permalink**) 20/11/2008, 08:28

Hola, les escribo nuevamente porque no he podido solucionar el problema
Como les mencioné, lightbox en firefox me funciona bien... pero en explorer y en opera cuando le doy click a la imagen, se carga en una ventana nueva y no en lightbox.

He buscado bastante en otros foros/páginas, pero nada que encuentro la solución...

Chelsea · #17 (**permalink**) 27/12/2008, 09:54

Hola a todos! bueno, quería comentarles que también he tenido la misma falla (el de no poder visualizarlo de manera correcta en IExplorer), pero me puse a probar distintas combinaciones entre los códigos, hasta que al fin salió!!

Esta parte (en azul)..

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

Debería ser reemplazado por esta:

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

Ojalá les haya servido (porque a mi me funcionó)

Crisch · #18 (**permalink**) 29/01/2009, 14:20

Hola Cesar
He seguido todos los pasos, pero cuando quiero mirar el lightbox desde la web, me abre la imagen en otra pagina, como se hacía antiguamente.
Ya probé todo lo que han dicho en este Foro y nada!!!!!! Alguien me puede ayudar por favor???

carlosd23 · #19 (**permalink**) 03/02/2012, 01:02

buenos dias.
tengo un problema parecido, a mi si me aparece el lightbox, pero el inconveniente es que al colocar el llamado a la imagen no me hace el enlace desde la miniatura que necesito sino que en la pagina me crea otra imagen en la esquina superior izquierda que es de donde al darle click se abre el lightbox, pero la miniatura queda sin vinculo alguno, por favor quien pueda ayudarme con eso le agradezco.
es decir quiero que el llamado al ligthbox se realice desde la imagen en miniatura que tengo en la pagina en un div y no que me llame y me cree otra imagen, necesito vincularlo a la miniatura establecida en la pagina. gracias.

ferrarimaca · #20 (**permalink**) 22/05/2012, 19:37

Hola a todos es primera vez que recurro a esto, pero lo hago en un acto de desesperacion.
Resulta que al momento de ver mi pagina web en linea, no me visualiza las imagenes en miniatura ( requerimiento de ligntbox para visualizar la imagen original) y al momento de hacer clik me visualizan solo algunas imagenes en grandes .

entonces despues de tanto intentar insertar lightbox en dreamweaver a traves de codigos, descarge e instale una extension lightbox que supone viene todo predeterminado.

los codigos me quedaron asi:
<div id="gallery1" class="lbGallery">
<ul>
<li> <a href="imagenes/grandes/G1.jpg" rel="lightbox[galeria1]" title="Habitación 1"> <img src="imagenes/pequenas/P1.jpg" width="128" height="201" alt="" /> </a>
<a href="imagenes/grandes/G2.jpg" rel="lightbox[galeria1]" title="Baño privado"></a>
<a href="imagenes/grandes/G3.jpg" rel="lightbox[galeria1]" title=" "></a

></li>
<li> <a href="imagenes/grandes/G4.jpg" rel="lightbox[galeria1]" title="Habitación 2"> <img src="imagenes/pequenas/P4.jpg" width="128" height="201" alt="" /> </a>

</li>
<li> <a href="imagenes/grandes/G5.JPG" rel="lightbox[galeria1]" title="Habitación 3"><img src="imagenes/pequenas/P5.jpg" width="128" height="201" alt="" /> </a>
<a href="imagenes/grandes/G6.jpg" rel="lightbox[galeria1]" title="Una o dos camas de 11/2 plaza y futon sala de baño compartida. "></a>
<a href="imagenes/grandes/G7.jpg" rel="lightbox[galeria1]" title="Habitación 3"></a>
<a href="imagenes/grandes/G8.jpg" rel="lightbox[galeria1]" title="Habitación 3"></a>

</li>
<li> <a href="imagenes/grandes/G13.jpg"rel="lightbox[galeria1]" title="Habitacion 4 Cama doble baño privado en suite y vista al norte. ">
<img src="imagenes/pequenas/P13.jpg" width="128" height="201" alt="" /> </a>
<a href="imagenes/grandes/G14.jpg" rel="lightbox[galeria1]" title="Cama dos plazas"></a>
<a href="imagenes/grandes/G15.jpg" rel="lightbox[galeria1]" title="Habitacion 4"></a>
<a href="imagenes/grandes/G16.jpg" rel="lightbox[galeria1]" title="Habitacion 4"></a>
<a href="imagenes/grandes/G17.jpg" rel="lightbox[galeria1]" title="Baño privado"></a>
<a href="imagenes/grandes/G18.jpg" rel="lightbox[galeria1]" title="Baño privado"></a>
<a href="imagenes/grandes/G19.jpg" rel="lightbox[galeria1]" title="Vista panoramica al puerto de Valparaiso"></a>

</li>
<li> <a href="imagenes/grandes/G9.JPG" rel="lightbox[galeria1]" title="Habitación 5"> <img src="imagenes/pequenas/P9.jpg" width="128" height="201" alt="" /> </a>
<a href="imagenes/grandes/G10.jpg" rel="lightbox[galeria1]" title="Cama 1 1/2 plaza + altillo "></a>
<a href="imagenes/grandes/G11.jpg" rel="lightbox[galeria1]" title="Habitación acogedora "></a>
<a href="imagenes/grandes/G12.jpg" rel="lightbox[galeria1]" title="Habitación acogedora "></a>

</li>
<li> <a href="imagenes/grandes/G20.JPG" rel="lightbox[galeria1]" title="LOFT, planta libre"> <img src="imagenes/pequenas/P20.jpg" width="128" height="201" alt="" /> </a>
<a href="imagenes/grandes/G21.jpg" rel="lightbox[galeria1]" title="Dos camas de 1 1/2 plaza "></a>
<a href="imagenes/grandes/G22.jpg" rel="lightbox[galeria1]" title="Sector camas separadas de espacios comunes"></a>
<a href="imagenes/grandes/G23.jpg" rel="lightbox[galeria1]" title="Baño privado"></a>
<a href="imagenes/grandes/G24.jpg" rel="lightbox[galeria1]" title="Dos camas de 1 1/2 plaza "></a>
<a href="imagenes/grandes/G27.jpg" rel="lightbox[galeria1]" title="Espacios comunes"></a>
<a href="imagenes/grandes/G28.jpg" rel="lightbox[galeria1]" title="Espacios comunes"></a>
<a href="imagenes/grandes/G29.jpg" rel="lightbox[galeria1]" title="Espacios comunes"></a>
<a href="imagenes/grandes/G30.jpg" rel="lightbox[galeria1]" title="Comedor"></a>
<a href="imagenes/grandes/G31.jpg" rel="lightbox[galeria1]" title="Living"></a>
<a href="imagenes/grandes/G32.jpg" rel="lightbox[galeria1]" title="Baño privado, cómdo"></a>
<a href="imagenes/grandes/G33.jpg" rel="lightbox[galeria1]" title="Terraza pañorámica"></a>

</li>
</ul>
</div>
<script type="text/javascript">
// BeginWebWidget lightbox_gallery

$(function() {
$('#gallery1 a').lightBox();
});

// EndWebWidget lightbox_gallery
</script>
</div>

y los codigos de orden que van despues de head:

<link rel="stylesheet" href="style.css" type="text/css"/>

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

<link href="estilos.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
</head>

no se cual es el problema, dentro de mi carpeta raiz tengo lightbox y en imagenes cree dos carpetas una se llamas grandes y otra pequenas.

ayuda pliiiiissss.

carlosencuesta · #21 (**permalink**) 20/08/2012, 17:28

Bueno pues yo tengo tmbn el mismo problema espero y me puedan ayudar el problema es que al abrir las imágenes no hace el efecto ligthbox solo me abre la imagen en una nueva pestaña este es el código que pongo el el head

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inmobiliaria Casol</title>
    <meta charset="utf-8">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.6.4.min.js"></script>
    <script src="js/cufon-yui.js"></script>
    <script src="js/Franklin_Gothic_Medium_400.font.js"></script>
    <script src="js/cufon-replace.js"></script>
    <script src="js/script.js"></script>
    <script src="js/flashobject.js"></script>
    <!--[if lt IE 8]>
        <div class='aligncenter'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg"border="0"></a></div>  
    <![endif]-->
    <!--[if lt IE 9]>
        <script src="js/html5.js"></script>
        <link rel="stylesheet" href="css/ie.css"> 
    <![endif]-->
</head>

y en este otro al colocar la imagen

Código HTML:

Ver original<figure class="border"><a class="text/javascript" data-gal="prettyPhoto[1]" href="images/page1-img2-big.jpg"><img src="images/page1-img2.jpg" alt=""></a></figure>

Espero me puedan ayudar Gracias