Subida inicial de web pincel cristal reforma 50 metros
git-svn-id: https://192.168.0.254/svn/Proyectos.PincelCristal_Web50metros/trunk@2 88b503a1-4b58-49db-b862-13da0b49c13b
179
apartamento1.htm
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
<!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=iso-8859-1"/>
|
||||||
|
<title>casa50metros.com - Mamparas y puertas de cristal</title>
|
||||||
|
<meta name="keywords" content="mamparas de cristal, puertas de cristal, piso pequeño, piso, casa, diseño de interiores, decoración, obras, reforma, interiorismo, mantenimiento, herrajes, bisagra, corredera"/>
|
||||||
|
<meta name="description" content="PINCEL CRISTAL, expertos en mamparas y puertas de cristal de corredera o con bisagra, para dar máxima luminosidad a su hogar"/>
|
||||||
|
<meta name="author" content="Rodax Software S.L."/>
|
||||||
|
<meta name="robots" content="all"/>
|
||||||
|
<link rel="stylesheet" href="estilos.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="css/apartamento1.css" type="text/css"/>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||||
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- LightBox-->
|
||||||
|
<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,builder"></script>
|
||||||
|
<script type="text/javascript" src="js/lightbox.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
try {
|
||||||
|
var pageTracker = _gat._getTracker("UA-297093-7");
|
||||||
|
pageTracker._trackPageview();
|
||||||
|
} catch(err) {}</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="pagewidth" >
|
||||||
|
<div id="header">
|
||||||
|
<h1><span>casa50metros.com</span></h1>
|
||||||
|
<h2>C/Sambara, nº 55 - 28027 Madrid<br/>Metro Quintana (Línea 5)<br/>Tlf/Fax: 91 326 22 89
|
||||||
|
<br/><a href="mailto:jonassalvador@hotmail.com">jonassalvador@hotmail.com</a></h2>
|
||||||
|
<p class='otrapagina'>Si quiere descubrir todas las ventajas del cristal,<br/>visite nuestra página <a href="http://www.pincelcristal.com">Pincel Cristal</a></p>
|
||||||
|
<div class="clr"></div>
|
||||||
|
|
||||||
|
<div id="galeriaapartamentos">
|
||||||
|
<ul id="menu">
|
||||||
|
<li><a href="index.htm"> Ejemplo de apartamento 1</a></li>
|
||||||
|
<li><a href="apartamento2.htm"> Ejemplo de apartamento 2</a></li>
|
||||||
|
<li><a class="current" href="apartamento1.htm"> Ejemplo de apartamento 3</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class='casaMap'><span>Plano de la casa</span></h3>
|
||||||
|
<dl id="casaMap">
|
||||||
|
<dt id="entrada">Entrada / recibidor</dt>
|
||||||
|
<dd id="entradaDef"><center><a href="#id1"><span><img src='images/apartamento1/entrada_sm.jpg' alt='Entrada'/></span></a></center></dd>
|
||||||
|
<dt id="pasillo">Pasillo</dt>
|
||||||
|
<dd id="pasilloDef"><center><a href="#id2"><span><img src='images/apartamento1/pasillo_sm.jpg' alt='Pasillo'/></span></a></center></dd>
|
||||||
|
<dt id="bano1">Baño</dt>
|
||||||
|
<dd id="bano1Def"><center><a href="#id3"><span><img src='images/apartamento1/bano1_sm.jpg' alt='Baño'/></span></a></center></dd>
|
||||||
|
<dt id="bano2">Aseo</dt>
|
||||||
|
<dd id="bano2Def"><center><a href="#id4"><span><img src='images/apartamento1/bano2_sm.jpg' alt='Baño'/></span></a></center></dd>
|
||||||
|
</dl>
|
||||||
|
<h4>Si nuestra casa no es grande y tiene poca luz, existe la alternativa del <strong>cristal</strong><br/>que aporta espacio y máxima luminosidad a las estancias.</h4>
|
||||||
|
<h5>Esta solución es <strong>limpia</strong>, se puede proceder al montaje sin necesidad de obra.<br/>Además de <strong>silenciosa</strong>, este tipo de cristal (SSG) evita la presencia de ruidos.</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="outer" >
|
||||||
|
<div id="inner">
|
||||||
|
<div id="maincol" >
|
||||||
|
<div class="clr"></div>
|
||||||
|
<div id="id1" class="seccion">
|
||||||
|
<h2>Entrada / Habitación - Baños</h2>
|
||||||
|
<p class="texto">Desde este punto observamos, con respecto a la distribución anterior, que se elimina el pasillo.<br/><br/><br/>
|
||||||
|
Los tabiques de cristal de seguridad silencioso en color (SSG Super Silent Glass), <strong>aportan claridad, silencio a la vez que intimidad a la instancia</strong>.<br/><br/><br/>
|
||||||
|
Este tipo de cristal lleva un tratamiento de seguridad y acústico que evita la presencia de ruidos.<br/><br/><br/>
|
||||||
|
En el ejemplo se utiliza un armario de cristal pintado para separar habitación y recibidor, <strong>al reflejar la luz nos da una sensación de espacio y amplitud</strong>.<br/><br/><br/>
|
||||||
|
Las puertas de los baños son de cristal securit templado, que <strong>aportan luz sin perder la intimidad.</strong>
|
||||||
|
</p>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento1/big/entrada1.jpg" rel="lightbox" title="Entrada con gran sensación de espacio">
|
||||||
|
<img src="images/apartamento1/entrada1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento1/big/entrada2.jpg" rel="lightbox" title="Entrada con gran sensación de espacio">
|
||||||
|
<img src="images/apartamento1/entrada2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div id="id2" class="seccion">
|
||||||
|
<h2>Entrada / Salón - Cocina</h2>
|
||||||
|
<p class="texto">
|
||||||
|
Como podemos ver, en las diferentes etapas de la instalación, <strong>el montaje no requiere albañilería</strong>, sobre cualquier tabique liso se puede proceder al montaje.<br/><br/><br/>
|
||||||
|
Con esta solución ganamos luminosidad, y máximo aprovechamiento de los espacios, quedando un salón - cocina de 24 metros cuadrados.<br/><br/><br/>
|
||||||
|
</p>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento1/big/pasillo2.jpg" rel="lightbox" title="Puerta de cristal">
|
||||||
|
<img src="images/apartamento1/pasillo2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento1/big/pasillo1.jpg" rel="lightbox" title="Puerta de cristal">
|
||||||
|
<img src="images/apartamento1/pasillo1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"></div>
|
||||||
|
<!--</div>
|
||||||
|
<div class="seccion">-->
|
||||||
|
<p class="texto">
|
||||||
|
El herraje de este tipo de puertas nos permite disponer de puertas de cristal <strong>correderas o abatibles en ambos sentidos (180º)</strong>, esto nos aporta espacios y mejora la accesibilidad.<br/><br/><br/>
|
||||||
|
Un cristal templado es 10 veces más seguro que uno no templado del mismo grosor.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento1/big/pasillo3.jpg" rel="lightbox" title="Cristal templado">
|
||||||
|
<img src="images/apartamento1/pasillo3.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div id="id3" class="seccion">
|
||||||
|
<h2>Baño 1</h2>
|
||||||
|
<p class="texto">
|
||||||
|
Puerta de acceso translucida con cerrojillo o pestillo, aportando <strong>intimidad y luminosidad con puerta cerrada</strong>.<br/><br/><br/>
|
||||||
|
Podemos observar que la puerta va sobre el hueco <strong>sin necesidad de cerco</strong>.<br/><br/><br/>
|
||||||
|
El baño dispone de ducha de obra con mampara de cristal securit transparente.
|
||||||
|
</p>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento1/big/bano1_2.jpg" rel="lightbox" title="Puerta de acceso translucida">
|
||||||
|
<img src="images/apartamento1/bano1_2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento1/big/bano1_1.jpg" rel="lightbox" title="Puerta de acceso translucida">
|
||||||
|
<img src="images/apartamento1/bano1_1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div id="id4" class="seccion">
|
||||||
|
<h2>Baño 2</h2>
|
||||||
|
<p class="texto">
|
||||||
|
Este baño dispone de plato de ducha con mampara fija más puerta en cristal templado securit transparente.<br/><br/><br/>
|
||||||
|
El panel fijo es de 10 milímetros, y puerta con abertura 180º mejorando la accesibilidad. Todo ello con <strong>gran precisión de ajuste</strong>.
|
||||||
|
</p>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento1/big/bano2_2.jpg" rel="lightbox" title="Baño con puerta de cristal securit">
|
||||||
|
<img src="images/apartamento1/bano2_2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento1/big/bano2_1.jpg" rel="lightbox" title="Baño con puerta de cristal securit">
|
||||||
|
<img src="images/apartamento1/bano2_1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!--maincol-->
|
||||||
|
</div> <!-- inner -->
|
||||||
|
</div> <!-- outer -->
|
||||||
|
</div> <!-- pagewidth -->
|
||||||
|
<div class="clr"></div>
|
||||||
|
<div id="footer">
|
||||||
|
<div class="content">
|
||||||
|
<p>Diseñado por <a href="http://www.rodax-software.com">Rodax Software S.L.</a> © 2006</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
179
apartamento2.htm
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
<!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=iso-8859-1"/>
|
||||||
|
<title>casa50metros.com - Mamparas y puertas de cristal</title>
|
||||||
|
<meta name="keywords" content="mamparas de cristal, puertas de cristal, piso pequeño, piso, casa, diseño de interiores, decoración, obras, reforma, interiorismo, mantenimiento, herrajes, bisagra, corredera"/>
|
||||||
|
<meta name="description" content="PINCEL CRISTAL, expertos en mamparas y puertas de cristal de corredera o con bisagra, para dar máxima luminosidad a su hogar"/>
|
||||||
|
<meta name="author" content="Rodax Software S.L."/>
|
||||||
|
<meta name="robots" content="all"/>
|
||||||
|
<link rel="stylesheet" href="estilos.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="css/apartamento2.css" type="text/css"/>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||||
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- LightBox-->
|
||||||
|
<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,builder"></script>
|
||||||
|
<script type="text/javascript" src="js/lightbox.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
try {
|
||||||
|
var pageTracker = _gat._getTracker("UA-297093-7");
|
||||||
|
pageTracker._trackPageview();
|
||||||
|
} catch(err) {}</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="pagewidth" >
|
||||||
|
<div id="header">
|
||||||
|
<h1><span>casa50metros.com</span></h1>
|
||||||
|
<h2>C/Sambara, nº 55 - 28027 Madrid<br/>Metro Quintana (Línea 5)<br/>Tlf/Fax: 91 326 22 89
|
||||||
|
<br/><a href="mailto:jonassalvador@hotmail.com">jonassalvador@hotmail.com</a></h2>
|
||||||
|
<p class='otrapagina'>Si quiere descubrir todas las ventajas del cristal,<br/>visite nuestra página <a href="http://www.pincelcristal.com">Pincel Cristal</a></p>
|
||||||
|
|
||||||
|
<div class="clr"></div>
|
||||||
|
|
||||||
|
<div id="galeriaapartamentos">
|
||||||
|
<ul id="menu">
|
||||||
|
<li><a href="index.htm"> Ejemplo de apartamento 1</a></li>
|
||||||
|
<li><a class="current" href="apartamento2.htm"> Ejemplo de apartamento 2</a></li>
|
||||||
|
<li><a href="apartamento1.htm"> Ejemplo de apartamento 3</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<h3 class='casaMap'><span>Plano de la casa</span></h3>
|
||||||
|
<dl id="casaMap">
|
||||||
|
<dt id="saloncomedor">Salón / Comedor</dt>
|
||||||
|
<dd id="saloncomedorDef"><center><a href="#id1"><span><img src='images/apartamento2/entradasalon1sm.jpg' alt='Salon - Comedor'/></span></a></center></dd>
|
||||||
|
<dt id="cocina">Cocina</dt>
|
||||||
|
<dd id="cocinaDef"><center><a href="#id3"><span><img src='images/apartamento2/cocinasm.jpg' alt='Baño'/></span></a></center></dd>
|
||||||
|
<dt id="habitacion">Habitación</dt>
|
||||||
|
<dd id="habitacionDef"><center><a href="#id3"><span><img src='images/apartamento2/habitacionsm.jpg' alt='Habitacion'/></span></a></center></dd>
|
||||||
|
<dt id="bano">Baño</dt>
|
||||||
|
<dd id="banoDef"><center><a href="#id2"><span><img src='images/apartamento2/banosm.jpg' alt='Baño'/></span></a></center></dd>
|
||||||
|
</dl>
|
||||||
|
<h4>Si nuestra casa no es grande y tiene poca luz, existe la alternativa del <strong>cristal</strong><br/>que aporta espacio y máxima luminosidad a las estancias.</h4>
|
||||||
|
<h5>Esta solución es <strong>limpia</strong>, se puede proceder al montaje sin necesidad de obra.<br/>Además de <strong>silenciosa</strong>, este tipo de cristal (SSG) evita la presencia de ruidos.</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="outer" >
|
||||||
|
<div id="inner">
|
||||||
|
<div id="maincol" >
|
||||||
|
<div class="clr"></div>
|
||||||
|
|
||||||
|
<div id="id1" class="seccion">
|
||||||
|
<h2>Entrada / Salón - Comedor</h2>
|
||||||
|
<p class="texto">
|
||||||
|
Con esta solución ganamos luminosidad, y máximo aprovechamiento de los espacios, quedando un salón - comedor de 20 metros cuadrados. Y una cocina con luz natural.<br/><br/><br/>
|
||||||
|
Desde este punto observamos, con respecto a la distribución anterior, que se elimina el pasillo.<br/><br/><br/>
|
||||||
|
</p>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento2/big/entradasalon2.jpg" rel="lightbox" title="Puerta de cristal">
|
||||||
|
<img src="images/apartamento2/entradasalon2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento2/big/entradasalon1.jpg" rel="lightbox" title="Puerta de cristal">
|
||||||
|
<img src="images/apartamento2/entradasalon1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"></div>
|
||||||
|
<!--</div>
|
||||||
|
|
||||||
|
<div class="seccion">-->
|
||||||
|
<p class="texto">
|
||||||
|
El herraje de este tipo de puertas nos permite disponer de puertas de cristal <strong>correderas o abatibles en ambos sentidos (180º)</strong>, esto nos aporta espacios y mejora la accesibilidad.<br/><br/>
|
||||||
|
Los tabiques de cristal de seguridad silencioso en color (SSG Super Silent Glass), <strong>aportan claridad, silencio a la vez que intimidad a la instancia</strong>.<br/><br/>
|
||||||
|
|
||||||
|
Un cristal templado es 10 veces más seguro que uno no templado del mismo grosor.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento2/big/entradasalon3.jpg" rel="lightbox" title="Cristal templado">
|
||||||
|
<img src="images/apartamento2/entradasalon3.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<div id="id2" class="seccion">
|
||||||
|
<h2>Salón - Baño</h2>
|
||||||
|
<p class="texto">
|
||||||
|
Las puertas de los baños son de cristal securit templado, que <strong>aportan luz sin perder la intimidad.</strong>
|
||||||
|
|
||||||
|
Este tipo de cristal lleva un tratamiento de seguridad y acústico que evita la presencia de ruidos.<br/><br/><br/>
|
||||||
|
|
||||||
|
Como podemos ver, en las diferentes etapas de la instalación, <strong>el montaje no requiere albañilería</strong>, sobre cualquier tabique liso se puede proceder al montaje.<br/>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento2/big/salonbano2.jpg" rel="lightbox" title="Entrada con gran sensación de espacio">
|
||||||
|
<img src="images/apartamento2/salonbano2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento2/big/salonbano1.jpg" rel="lightbox" title="Entrada con gran sensación de espacio">
|
||||||
|
<img src="images/apartamento2/salonbano1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</br>
|
||||||
|
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento2/big/salonbano4.jpg" rel="lightbox" title="Entrada con gran sensación de espacio">
|
||||||
|
<img src="images/apartamento2/salonbano4.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento2/big/salonbano3.jpg" rel="lightbox" title="Entrada con gran sensación de espacio">
|
||||||
|
<img src="images/apartamento2/salonbano3.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<div id="id3" class="seccion">
|
||||||
|
<h2>Cocina - Habitación</h2>
|
||||||
|
<p class="texto">
|
||||||
|
Puerta de acceso translucida con cerrojillo o pestillo, aportando <strong>intimidad y luminosidad con puerta cerrada</strong>.<br/><br/><br/>
|
||||||
|
Podemos observar que la puerta va sobre el hueco <strong>sin necesidad de cerco</strong>.<br/><br/><br/>
|
||||||
|
</p>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento2/big/cocinahabitacion2.jpg" rel="lightbox" title="Puerta de acceso translucida">
|
||||||
|
<img src="images/apartamento2/cocinahabitacion2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento2/big/cocinahabitacion1.jpg" rel="lightbox" title="Puerta de acceso translucida">
|
||||||
|
<img src="images/apartamento2/cocinahabitacion1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!--maincol-->
|
||||||
|
</div> <!-- inner -->
|
||||||
|
</div> <!-- outer -->
|
||||||
|
</div> <!-- pagewidth -->
|
||||||
|
<div class="clr"></div>
|
||||||
|
<div id="footer">
|
||||||
|
<div class="content">
|
||||||
|
<p>Diseñado por <a href="http://www.rodax-software.com">Rodax Software S.L.</a> © 2006</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
103
css/apartamento1.css
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
#header .casaMap {
|
||||||
|
float: right;
|
||||||
|
height: 200px;
|
||||||
|
width: 430px;
|
||||||
|
background-image: url('../images/apartamento1/planocasa_antes.jpg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top right;
|
||||||
|
}
|
||||||
|
|
||||||
|
dl#casaMap {
|
||||||
|
float: left;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent url('../images/apartamento1/planocasa_despues.jpg') top left no-repeat;
|
||||||
|
height: 365px;
|
||||||
|
width: 317px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt{ margin: 0; padding: 0; position: absolute;display: none; }
|
||||||
|
dd{ margin: 0; padding: 0; position: absolute;}
|
||||||
|
|
||||||
|
|
||||||
|
dd#entradaDef {top: 150px; left: 165px; }
|
||||||
|
dd#entradaDef a {position: absolute; width: 120px; height: 160px; text-decoration: none; }
|
||||||
|
dd#entradaDef a span {display: none;}
|
||||||
|
dd#entradaDef a:hover {visibility: visible;}
|
||||||
|
dd#entradaDef a:hover span{
|
||||||
|
width: 250%;
|
||||||
|
top: 50%;
|
||||||
|
left: 25%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: #082C63;
|
||||||
|
background-color: #E0F5FE;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
dd#pasilloDef {top: 80px; left: 150px;}
|
||||||
|
dd#pasilloDef a{position: absolute; width: 40px; height: 65px; text-decoration: none;}
|
||||||
|
dd#pasilloDef a span{ display: none; }
|
||||||
|
dd#pasilloDef a:hover {visibility: visible;}
|
||||||
|
dd#pasilloDef a:hover span{
|
||||||
|
width: 350%;
|
||||||
|
top: 25%;
|
||||||
|
left: -400%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
text-align: right;
|
||||||
|
color: #082C63;
|
||||||
|
background-color: #E0F5FE;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
dd#bano1Def {top: 80px; left: 195px; }
|
||||||
|
dd#bano1Def a{position: absolute; width: 80px; height: 60px; text-decoration: none;}
|
||||||
|
dd#bano1Def a span{ display: none; }
|
||||||
|
dd#bano1Def a:hover {visibility: visible;}
|
||||||
|
dd#bano1Def a:hover span{
|
||||||
|
width: 250%;
|
||||||
|
top: 25%;
|
||||||
|
left: 100%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: #082C63;
|
||||||
|
background-color: #E0F5FE;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
dd#bano2Def {top: 15px; left: 150px;}
|
||||||
|
dd#bano2Def a{position: absolute; width: 115px; height: 65px; text-decoration: none;}
|
||||||
|
dd#bano2Def a span{ display: none; }
|
||||||
|
dd#bano2Def a:hover {visibility: visible;}
|
||||||
|
dd#bano2Def a:hover span{
|
||||||
|
width: 250%;
|
||||||
|
top: 25%;
|
||||||
|
left: 70%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: #082C63;
|
||||||
|
background-color: #E0F5FE;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
96
css/apartamento2.css
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
#header .casaMap{
|
||||||
|
float: right;
|
||||||
|
height: 200px;
|
||||||
|
width: 430px;
|
||||||
|
background-image: url('../images/apartamento2/planocasa_antes.jpg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top right;
|
||||||
|
}
|
||||||
|
|
||||||
|
dl#casaMap {
|
||||||
|
float: left;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent url('../images/apartamento2/planocasa_despues.jpg') top left no-repeat;
|
||||||
|
height: 365px;
|
||||||
|
width: 317px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt{ margin: 0; padding: 0; position: absolute;display: none; }
|
||||||
|
dd{ margin: 0; padding: 0; position: absolute;}
|
||||||
|
|
||||||
|
|
||||||
|
dd#saloncomedorDef {top: 150px; left: 25px; }
|
||||||
|
dd#saloncomedorDef a {position: absolute; width: 200px; height: 100px; text-decoration: none; }
|
||||||
|
dd#saloncomedorDef a span {display: none;}
|
||||||
|
dd#saloncomedorDef a:hover {visibility: visible;}
|
||||||
|
dd#saloncomedorDef a:hover span{
|
||||||
|
width: 100%;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: none;
|
||||||
|
background-color: #f9abb0;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 0px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
dd#cocinaDef {top: 40px; left: 225px; }
|
||||||
|
dd#cocinaDef a{position: absolute; width: 70px; height: 150px; text-decoration: none;}
|
||||||
|
dd#cocinaDef a span{ display: none; }
|
||||||
|
dd#cocinaDef a:hover {visibility: visible;}
|
||||||
|
dd#cocinaDef a:hover span{
|
||||||
|
width: 100%;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: none;
|
||||||
|
background-color: #E0F5FE;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 0px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
dd#habitacionDef {top: 35px; left: 20px;}
|
||||||
|
dd#habitacionDef a{position: absolute; width: 130px; height: 120px; text-decoration: none;}
|
||||||
|
dd#habitacionDef a span{ display: none; }
|
||||||
|
dd#habitacionDef a:hover {visibility: visible;}
|
||||||
|
dd#habitacionDef a:hover span{
|
||||||
|
width: 100%;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: none;
|
||||||
|
background-color: #fbfbb2;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 0px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd#banoDef {top: 255px; left: 135px;}
|
||||||
|
dd#banoDef a{position: absolute; width: 160px; height: 65px; text-decoration: none;}
|
||||||
|
dd#banoDef a span{ display: none; }
|
||||||
|
dd#banoDef a:hover {visibility: visible;}
|
||||||
|
dd#banoDef a:hover span{
|
||||||
|
width: 100%;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: none;
|
||||||
|
background-color: #fada97;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 0px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
77
css/apartamento3.css
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
#header .casaMap {
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 ul {
|
||||||
|
font-size:18px;
|
||||||
|
line-height:170%;
|
||||||
|
margin:0 0 0 15px;
|
||||||
|
text-align:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
dl#casaMap {
|
||||||
|
float: left;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent url('../images/apartamento3/planocasa_despues.jpg') top left no-repeat;
|
||||||
|
height: 365px;
|
||||||
|
width: 345px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt{ margin: 0; padding: 0; position: absolute;display: none; }
|
||||||
|
dd{ margin: 0; padding: 0; position: absolute;}
|
||||||
|
|
||||||
|
dd#saloncomedorDef {top: 150px; left: 25px; }
|
||||||
|
dd#saloncomedorDef a {position: absolute; width: 200px; height: 100px; text-decoration: none; }
|
||||||
|
dd#saloncomedorDef a span {display: none;}
|
||||||
|
dd#saloncomedorDef a:hover {visibility: visible;}
|
||||||
|
dd#saloncomedorDef a:hover span{
|
||||||
|
width: 100%;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: none;
|
||||||
|
background-color: #f9abb0;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 0px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd#cocinaDef {top: 40px; left: 200px; }
|
||||||
|
dd#cocinaDef a{position: absolute; width: 70px; height: 200px; text-decoration: none;}
|
||||||
|
dd#cocinaDef a span{ display: none; }
|
||||||
|
dd#cocinaDef a:hover {visibility: visible;}
|
||||||
|
dd#cocinaDef a:hover span{
|
||||||
|
width: 100%;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: none;
|
||||||
|
background-color: #E0F5FE;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 0px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
dd#habitacionDef {top: 185px; left: 180px;}
|
||||||
|
dd#habitacionDef a{position: absolute; width: 130px; height: 120px; text-decoration: none;}
|
||||||
|
dd#habitacionDef a span{ display: none; }
|
||||||
|
dd#habitacionDef a:hover {visibility: visible;}
|
||||||
|
dd#habitacionDef a:hover span{
|
||||||
|
width: 100%;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
display: block;
|
||||||
|
text-indent: 0;
|
||||||
|
color: none;
|
||||||
|
background-color: #fbfbb2;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
border: 0px solid #15A7EB;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
27
css/lightbox.css
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
|
||||||
|
#lightbox img{ width: auto; height: auto;}
|
||||||
|
#lightbox a img{ border: none; }
|
||||||
|
|
||||||
|
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
|
||||||
|
#imageContainer{ padding: 10px; }
|
||||||
|
|
||||||
|
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
|
||||||
|
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
|
||||||
|
#imageContainer>#hoverNav{ left: 0;}
|
||||||
|
#hoverNav a{ outline: none;}
|
||||||
|
|
||||||
|
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
|
||||||
|
#prevLink { left: 0; float: left;}
|
||||||
|
#nextLink { right: 0; float: right;}
|
||||||
|
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
|
||||||
|
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
|
||||||
|
|
||||||
|
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
|
||||||
|
|
||||||
|
#imageData{ padding:0 10px; color: #666; }
|
||||||
|
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
|
||||||
|
#imageData #caption{ font-weight: bold; }
|
||||||
|
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
|
||||||
|
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
|
||||||
|
|
||||||
|
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
|
||||||
300
estilos.css
Normal file
@ -0,0 +1,300 @@
|
|||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
text-align:center;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
background-image: url('images/background.gif');
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-position: top;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #FF6600;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: #FF6600;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #0066CC;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: #082C63;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
padding-bottom: 15px;
|
||||||
|
margin: 10px 0 0 0px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 38px;
|
||||||
|
color: #FFF0F9;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: normal;
|
||||||
|
color: #FF6600;
|
||||||
|
padding: 10px 0px 20px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #15A7EB
|
||||||
|
}
|
||||||
|
|
||||||
|
p, ul {
|
||||||
|
color: #666666;
|
||||||
|
line-height: 18px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clr{clear:both;}
|
||||||
|
|
||||||
|
#pagewidth{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
width:770px;
|
||||||
|
text-align:left;
|
||||||
|
margin-left:auto;
|
||||||
|
margin-right:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header{
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h1 {
|
||||||
|
text-align: left;
|
||||||
|
height: 45px;
|
||||||
|
background-image: url('images/title.gif');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h1 span {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h2 {
|
||||||
|
float: left;
|
||||||
|
text-align: left;
|
||||||
|
width: 300px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 130%;
|
||||||
|
color: #FAECD9;
|
||||||
|
padding: 0px 0px 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header .otrapagina {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
width: 420px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 130%;
|
||||||
|
color: #FFED84;
|
||||||
|
padding: 0px 10px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header .otrapagina a {
|
||||||
|
color: White;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h3 span {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h4 {
|
||||||
|
float: right;
|
||||||
|
text-align: center;
|
||||||
|
width: 55%;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 130%;
|
||||||
|
color: #333;
|
||||||
|
padding: 20px 0px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h4 strong {
|
||||||
|
color: #15A7EB;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h5 {
|
||||||
|
color: #15A7EB;
|
||||||
|
float: right;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 130%;
|
||||||
|
color: #333;
|
||||||
|
padding: 0px 0px 15px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h5 strong {
|
||||||
|
color: #15A7EB;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header a {
|
||||||
|
color: #FAECD9;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header a:hover {
|
||||||
|
color: #0066CC;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header a:active {
|
||||||
|
color: #082C63;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px 10px;
|
||||||
|
background-image: url('images/background.gif');
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-position: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer p{
|
||||||
|
color: #FAECD9;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer a {
|
||||||
|
color: #FAECD9;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer a:hover {
|
||||||
|
color: White;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer a:active {
|
||||||
|
color: White;
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#outer {
|
||||||
|
background-color: #FFFFFF; /* center column colour */
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inner {
|
||||||
|
margin:0;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#maincol{
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 -8px 0 -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clr{clear:both;}
|
||||||
|
|
||||||
|
.content{padding:0px;margin:0px;} /*padding for content */
|
||||||
|
|
||||||
|
#header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/
|
||||||
|
|
||||||
|
.seccion {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px 5px 20px 5px;
|
||||||
|
background-color: #F3F3F3;
|
||||||
|
border: 1px dashed #CACACA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.texto {
|
||||||
|
float: left;
|
||||||
|
width: 160px;
|
||||||
|
padding: 0px 5px 0px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foto, .foto2 {
|
||||||
|
float: right;
|
||||||
|
min-width: 250px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foto img, .foto2 img {
|
||||||
|
background-color: White;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid #D3D3D3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.piefoto {
|
||||||
|
padding: 0px 8px;
|
||||||
|
margin: 0px 3px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #15A7EB;
|
||||||
|
vertical-align: bottom;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foto2 {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nombre {
|
||||||
|
float:left;
|
||||||
|
margin: 10px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direccion {
|
||||||
|
float: left;
|
||||||
|
width: 280px;
|
||||||
|
margin: 50px 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direccion p {
|
||||||
|
text-align: left;
|
||||||
|
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
|
||||||
|
color: #FAECD9;
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#galeriaapartamentos{
|
||||||
|
padding: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#galeriaapartamentos ul#menu { width: 100%; height: 35px; font-size: 1em; list-style-type: none; margin: 0; padding: 0}
|
||||||
|
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
|
||||||
|
ul#menu li a { height: 35px; color: #A9C7F2; text-decoration: none; display: block; float: left; line-height: 200%; padding: 4px 15px 0; }
|
||||||
|
ul#menu li a:hover { color: #333; }
|
||||||
|
ul#menu li a.current{ color: #FFF; font-weight: bold; }
|
||||||
|
|
||||||
|
|
||||||
BIN
images/Thumbs.db
Normal file
BIN
images/apartamento1/Thumbs.db
Normal file
BIN
images/apartamento1/bano1_1.jpg
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
images/apartamento1/bano1_2.jpg
Normal file
|
After Width: | Height: | Size: 6.8 KiB |
BIN
images/apartamento1/bano1_sm.jpg
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
images/apartamento1/bano2_1.jpg
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
images/apartamento1/bano2_2.jpg
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
images/apartamento1/bano2_sm.jpg
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
images/apartamento1/big/Thumbs.db
Normal file
BIN
images/apartamento1/big/bano1_1.jpg
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
images/apartamento1/big/bano1_2.jpg
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
images/apartamento1/big/bano2_1.jpg
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
images/apartamento1/big/bano2_2.jpg
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
images/apartamento1/big/entrada1.jpg
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
images/apartamento1/big/entrada2.jpg
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
images/apartamento1/big/pasillo1.jpg
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
images/apartamento1/big/pasillo2.jpg
Normal file
|
After Width: | Height: | Size: 31 KiB |
BIN
images/apartamento1/big/pasillo3.jpg
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
images/apartamento1/cocina_sm.jpg
Normal file
|
After Width: | Height: | Size: 6.8 KiB |
BIN
images/apartamento1/entrada1.jpg
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
images/apartamento1/entrada2.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
images/apartamento1/entrada_sm.jpg
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
images/apartamento1/pasillo1.jpg
Normal file
|
After Width: | Height: | Size: 8.3 KiB |
BIN
images/apartamento1/pasillo2.jpg
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
images/apartamento1/pasillo3.jpg
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
images/apartamento1/pasillo_sm.jpg
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
images/apartamento1/planocasa_antes.jpg
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
images/apartamento1/planocasa_despues.jpg
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
images/apartamento2/Thumbs.db
Normal file
BIN
images/apartamento2/banosm.jpg
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
images/apartamento2/big/Thumbs.db
Normal file
BIN
images/apartamento2/big/cocinahabitacion1.jpg
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
images/apartamento2/big/cocinahabitacion2.jpg
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
images/apartamento2/big/entradasalon1.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
images/apartamento2/big/entradasalon2.jpg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
images/apartamento2/big/entradasalon3.jpg
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
images/apartamento2/big/salonbano1.jpg
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
images/apartamento2/big/salonbano2.jpg
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
images/apartamento2/big/salonbano3.jpg
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
images/apartamento2/big/salonbano4.jpg
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
images/apartamento2/cocinahabitacion1.jpg
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
images/apartamento2/cocinahabitacion2.jpg
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
images/apartamento2/cocinasm.jpg
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
images/apartamento2/entradasalon1.jpg
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/apartamento2/entradasalon1sm.jpg
Normal file
|
After Width: | Height: | Size: 6.0 KiB |
BIN
images/apartamento2/entradasalon2.jpg
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
images/apartamento2/entradasalon3.jpg
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
images/apartamento2/habitacionsm.jpg
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
images/apartamento2/planocasa_antes.jpg
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
images/apartamento2/planocasa_despues.jpg
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
images/apartamento2/salonbano1.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
images/apartamento2/salonbano2.jpg
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
images/apartamento2/salonbano3.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
images/apartamento2/salonbano4.jpg
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
images/apartamento3/Thumbs.db
Normal file
BIN
images/apartamento3/big/Thumbs.db
Normal file
BIN
images/apartamento3/big/cocinabano1.jpg
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
images/apartamento3/big/cocinabano2.jpg
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
images/apartamento3/big/entradasalon1.jpg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
images/apartamento3/big/entradasalon2.jpg
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
images/apartamento3/big/habitacion_bano1.jpg
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
images/apartamento3/big/habitacion_bano2.jpg
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
images/apartamento3/big/habitacion_bano3.jpg
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
images/apartamento3/cocinabano1.jpg
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
images/apartamento3/cocinabano1sm.jpg
Normal file
|
After Width: | Height: | Size: 8.6 KiB |
BIN
images/apartamento3/cocinabano2.jpg
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
images/apartamento3/entradasalon1.jpg
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
images/apartamento3/entradasalon1sm.jpg
Normal file
|
After Width: | Height: | Size: 8.4 KiB |
BIN
images/apartamento3/entradasalon2.jpg
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
images/apartamento3/habitacion_bano1.jpg
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
images/apartamento3/habitacion_bano2.jpg
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
images/apartamento3/habitacion_bano3.jpg
Normal file
|
After Width: | Height: | Size: 9.8 KiB |
BIN
images/apartamento3/habitacion_bano3sm.jpg
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
images/apartamento3/planocasa_despues.jpg
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
images/back.gif
Normal file
|
After Width: | Height: | Size: 105 B |
BIN
images/back_banner.gif
Normal file
|
After Width: | Height: | Size: 43 B |
BIN
images/background.gif
Normal file
|
After Width: | Height: | Size: 468 B |
BIN
images/bullet.gif
Normal file
|
After Width: | Height: | Size: 49 B |
BIN
images/close.gif
Normal file
|
After Width: | Height: | Size: 222 B |
BIN
images/closelabel.gif
Normal file
|
After Width: | Height: | Size: 979 B |
BIN
images/title.gif
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
174
index.htm
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
<!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=iso-8859-1"/>
|
||||||
|
<title>casa50metros.com - Mamparas y puertas de cristal</title>
|
||||||
|
<meta name="keywords" content="mamparas de cristal, puertas de cristal, piso pequeño, piso, casa, diseño de interiores, decoración, obras, reforma, interiorismo, mantenimiento, herrajes, bisagra, corredera"/>
|
||||||
|
<meta name="description" content="PINCEL CRISTAL, expertos en mamparas y puertas de cristal de corredera o con bisagra, para dar máxima luminosidad a su hogar"/>
|
||||||
|
<meta name="author" content="Rodax Software S.L."/>
|
||||||
|
<meta name="robots" content="all"/>
|
||||||
|
<link rel="stylesheet" href="estilos.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="css/apartamento3.css" type="text/css"/>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||||
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- LightBox-->
|
||||||
|
<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,builder"></script>
|
||||||
|
<script type="text/javascript" src="js/lightbox.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
try {
|
||||||
|
var pageTracker = _gat._getTracker("UA-297093-7");
|
||||||
|
pageTracker._trackPageview();
|
||||||
|
} catch(err) {}</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="pagewidth" >
|
||||||
|
<div id="header">
|
||||||
|
<h1><span>casa50metros.com</span></h1>
|
||||||
|
<h2>C/Sambara, nº 55 - 28027 Madrid<br/>Metro Quintana (Línea 5)<br/>Tlf/Fax: 91 326 22 89
|
||||||
|
<br/><a href="mailto:jonassalvador@hotmail.com">jonassalvador@hotmail.com</a></h2>
|
||||||
|
<p class='otrapagina'>Si quiere descubrir todas las ventajas del cristal,<br/>visite nuestra página <a href="http://www.pincelcristal.com">Pincel Cristal</a></p>
|
||||||
|
|
||||||
|
<div class="clr"></div>
|
||||||
|
|
||||||
|
<div id="galeriaapartamentos">
|
||||||
|
<ul id="menu">
|
||||||
|
<li><a class="current" href="index.htm"> Ejemplo de apartamento 1</a></li>
|
||||||
|
<li><a href="apartamento2.htm"> Ejemplo de apartamento 2</a></li>
|
||||||
|
<li><a href="apartamento1.htm"> Ejemplo de apartamento 3</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<h3 class='casaMap'><span>Plano de la casa</span></h3>
|
||||||
|
<dl id="casaMap">
|
||||||
|
<dt id="saloncomedor">Salón / Comedor</dt>
|
||||||
|
<dd id="saloncomedorDef"><center><a href="#id1"><span><img src='images/apartamento3/entradasalon1sm.jpg' alt='Salon - Comedor'/></span></a></center></dd>
|
||||||
|
<dt id="cocina">Cocina</dt>
|
||||||
|
<dd id="cocinaDef"><center><a href="#id2"><span><img src='images/apartamento3/cocinabano1sm.jpg' alt='Cocina - Baño'/></span></a></center></dd>
|
||||||
|
<dt id="habitacion">Habitación</dt>
|
||||||
|
<dd id="habitacionDef"><center><a href="#id3"><span><img src='images/apartamento3/habitacion_bano3sm.jpg' alt='Habitacion'/></span></a></center></dd>
|
||||||
|
</dl>
|
||||||
|
<h4>
|
||||||
|
<ul id="caracteristicas">
|
||||||
|
<li>*1 - Ejemplo de tabique fijo de cristal. </li>
|
||||||
|
<li>*2 - Puertas corredera de doble hoja para accesos a cocina y baño </li>
|
||||||
|
<li>*3 - Mampara de ducha </li>
|
||||||
|
<li>*4 - Puerta corredera para baño </li>
|
||||||
|
<li>*5 - Puerta corredera para dormitorio </li>
|
||||||
|
</ul>
|
||||||
|
<br />
|
||||||
|
Si nuestra casa no es grande y tiene poca luz, existe la alternativa del <strong>cristal</strong><br/>que aporta espacio y máxima luminosidad a las estancias.</h4>
|
||||||
|
<h5>Esta solución es <strong>limpia</strong>, se puede proceder al montaje sin necesidad de obra.<br/>Además de <strong>silenciosa</strong>, este tipo de cristal (SSG) evita la presencia de ruidos.</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="outer" >
|
||||||
|
<div id="inner">
|
||||||
|
<div id="maincol" >
|
||||||
|
<div class="clr"></div>
|
||||||
|
|
||||||
|
<div id="id1" class="seccion">
|
||||||
|
<h2>Entrada / Salón - Comedor</h2>
|
||||||
|
<p class="texto">
|
||||||
|
Con esta solución ganamos luminosidad, y máximo aprovechamiento de los espacios, quedando un <strong>salón - comedor de 27 metros cuadrados. Y una cocina con luz natural.</strong><br/><br/>
|
||||||
|
El herraje de este tipo de puertas nos permite disponer de puertas correderas de cristal de doble hoja, esto nos aporta espacios mejorando la accesibilidad.<br/><br/> </p>
|
||||||
|
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento3/big/entradasalon1.jpg" rel="lightbox" title="Cristal templado">
|
||||||
|
<img src="images/apartamento3/entradasalon1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clr"></div>
|
||||||
|
|
||||||
|
<p class="texto">
|
||||||
|
Los tabiques de cristal de seguridad silencioso en color (SSG Super Silent Glass), <strong>aportan claridad, silencio a la vez que intimidad a la instancia</strong>.<br/><br/>
|
||||||
|
|
||||||
|
Un cristal templado es 10 veces más seguro que uno no templado del mismo grosor.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento3/big/entradasalon2.jpg" rel="lightbox" title="Cristal templado">
|
||||||
|
<img src="images/apartamento3/entradasalon2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<div id="id2" class="seccion">
|
||||||
|
<h2>Cocina - Baño</h2>
|
||||||
|
<p class="texto">
|
||||||
|
Las puertas de los baños son de cristal securit templado, que <strong>aportan luz sin perder la intimidad.</strong>
|
||||||
|
|
||||||
|
Este tipo de cristal lleva un tratamiento de seguridad y acústico que evita la presencia de ruidos.<br/><br/><br/><br/><br/><br/> <br/><br/><br/>
|
||||||
|
</p>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento3/big/cocinabano1.jpg" rel="lightbox" title="Entrada con gran sensación de espacio">
|
||||||
|
<img src="images/apartamento3/cocinabano1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clr"></div>
|
||||||
|
|
||||||
|
<p class="texto">
|
||||||
|
Como podemos ver, en las diferentes etapas de la instalación, <strong>el montaje no requiere albañilería</strong>, sobre cualquier tabique liso se puede proceder al montaje.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento3/big/cocinabano2.jpg" rel="lightbox" title="Entrada con gran sensación de espacio">
|
||||||
|
<img src="images/apartamento3/cocinabano2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<div id="id3" class="seccion">
|
||||||
|
<h2>Habitación - Baño</h2>
|
||||||
|
<p class="texto">
|
||||||
|
Puerta de acceso translucida con cerrojillo o pestillo, aportando <strong>intimidad y luminosidad con puerta cerrada</strong>.<br/><br/><br/>
|
||||||
|
Podemos observar que la puerta va sobre el hueco <strong>sin necesidad de cerco</strong>.<br/><br/><br/>
|
||||||
|
</p>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento3/big/habitacion_bano2.jpg" rel="lightbox" title="Puerta de acceso translucida">
|
||||||
|
<img src="images/apartamento3/habitacion_bano2.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento3/big/habitacion_bano3.jpg" rel="lightbox" title="Puerta de acceso translucida">
|
||||||
|
<img src="images/apartamento3/habitacion_bano3.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class='foto'>
|
||||||
|
<a href="images/apartamento3/big/habitacion_bano1.jpg" rel="lightbox" title="Puerta de acceso translucida">
|
||||||
|
<img src="images/apartamento3/habitacion_bano1.jpg" alt=""/>
|
||||||
|
</a>
|
||||||
|
<p class='piefoto'></p>
|
||||||
|
</div>
|
||||||
|
<div class="clr"><h3><a href="#">Volver al inicio</a></h3></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!--maincol-->
|
||||||
|
</div> <!-- inner -->
|
||||||
|
</div> <!-- outer -->
|
||||||
|
</div> <!-- pagewidth -->
|
||||||
|
<div class="clr"></div>
|
||||||
|
<div id="footer">
|
||||||
|
<div class="content">
|
||||||
|
<p>Diseñado por <a href="http://www.rodax-software.com">Rodax Software S.L.</a> © 2006</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
136
js/builder.js
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
// script.aculo.us builder.js v1.8.1, Thu Jan 03 22:07:12 -0500 2008
|
||||||
|
|
||||||
|
// Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
|
//
|
||||||
|
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||||
|
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||||
|
|
||||||
|
var Builder = {
|
||||||
|
NODEMAP: {
|
||||||
|
AREA: 'map',
|
||||||
|
CAPTION: 'table',
|
||||||
|
COL: 'table',
|
||||||
|
COLGROUP: 'table',
|
||||||
|
LEGEND: 'fieldset',
|
||||||
|
OPTGROUP: 'select',
|
||||||
|
OPTION: 'select',
|
||||||
|
PARAM: 'object',
|
||||||
|
TBODY: 'table',
|
||||||
|
TD: 'table',
|
||||||
|
TFOOT: 'table',
|
||||||
|
TH: 'table',
|
||||||
|
THEAD: 'table',
|
||||||
|
TR: 'table'
|
||||||
|
},
|
||||||
|
// note: For Firefox < 1.5, OPTION and OPTGROUP tags are currently broken,
|
||||||
|
// due to a Firefox bug
|
||||||
|
node: function(elementName) {
|
||||||
|
elementName = elementName.toUpperCase();
|
||||||
|
|
||||||
|
// try innerHTML approach
|
||||||
|
var parentTag = this.NODEMAP[elementName] || 'div';
|
||||||
|
var parentElement = document.createElement(parentTag);
|
||||||
|
try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
|
||||||
|
parentElement.innerHTML = "<" + elementName + "></" + elementName + ">";
|
||||||
|
} catch(e) {}
|
||||||
|
var element = parentElement.firstChild || null;
|
||||||
|
|
||||||
|
// see if browser added wrapping tags
|
||||||
|
if(element && (element.tagName.toUpperCase() != elementName))
|
||||||
|
element = element.getElementsByTagName(elementName)[0];
|
||||||
|
|
||||||
|
// fallback to createElement approach
|
||||||
|
if(!element) element = document.createElement(elementName);
|
||||||
|
|
||||||
|
// abort if nothing could be created
|
||||||
|
if(!element) return;
|
||||||
|
|
||||||
|
// attributes (or text)
|
||||||
|
if(arguments[1])
|
||||||
|
if(this._isStringOrNumber(arguments[1]) ||
|
||||||
|
(arguments[1] instanceof Array) ||
|
||||||
|
arguments[1].tagName) {
|
||||||
|
this._children(element, arguments[1]);
|
||||||
|
} else {
|
||||||
|
var attrs = this._attributes(arguments[1]);
|
||||||
|
if(attrs.length) {
|
||||||
|
try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
|
||||||
|
parentElement.innerHTML = "<" +elementName + " " +
|
||||||
|
attrs + "></" + elementName + ">";
|
||||||
|
} catch(e) {}
|
||||||
|
element = parentElement.firstChild || null;
|
||||||
|
// workaround firefox 1.0.X bug
|
||||||
|
if(!element) {
|
||||||
|
element = document.createElement(elementName);
|
||||||
|
for(attr in arguments[1])
|
||||||
|
element[attr == 'class' ? 'className' : attr] = arguments[1][attr];
|
||||||
|
}
|
||||||
|
if(element.tagName.toUpperCase() != elementName)
|
||||||
|
element = parentElement.getElementsByTagName(elementName)[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// text, or array of children
|
||||||
|
if(arguments[2])
|
||||||
|
this._children(element, arguments[2]);
|
||||||
|
|
||||||
|
return element;
|
||||||
|
},
|
||||||
|
_text: function(text) {
|
||||||
|
return document.createTextNode(text);
|
||||||
|
},
|
||||||
|
|
||||||
|
ATTR_MAP: {
|
||||||
|
'className': 'class',
|
||||||
|
'htmlFor': 'for'
|
||||||
|
},
|
||||||
|
|
||||||
|
_attributes: function(attributes) {
|
||||||
|
var attrs = [];
|
||||||
|
for(attribute in attributes)
|
||||||
|
attrs.push((attribute in this.ATTR_MAP ? this.ATTR_MAP[attribute] : attribute) +
|
||||||
|
'="' + attributes[attribute].toString().escapeHTML().gsub(/"/,'"') + '"');
|
||||||
|
return attrs.join(" ");
|
||||||
|
},
|
||||||
|
_children: function(element, children) {
|
||||||
|
if(children.tagName) {
|
||||||
|
element.appendChild(children);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(typeof children=='object') { // array can hold nodes and text
|
||||||
|
children.flatten().each( function(e) {
|
||||||
|
if(typeof e=='object')
|
||||||
|
element.appendChild(e)
|
||||||
|
else
|
||||||
|
if(Builder._isStringOrNumber(e))
|
||||||
|
element.appendChild(Builder._text(e));
|
||||||
|
});
|
||||||
|
} else
|
||||||
|
if(Builder._isStringOrNumber(children))
|
||||||
|
element.appendChild(Builder._text(children));
|
||||||
|
},
|
||||||
|
_isStringOrNumber: function(param) {
|
||||||
|
return(typeof param=='string' || typeof param=='number');
|
||||||
|
},
|
||||||
|
build: function(html) {
|
||||||
|
var element = this.node('div');
|
||||||
|
$(element).update(html.strip());
|
||||||
|
return element.down();
|
||||||
|
},
|
||||||
|
dump: function(scope) {
|
||||||
|
if(typeof scope != 'object' && typeof scope != 'function') scope = window; //global scope
|
||||||
|
|
||||||
|
var tags = ("A ABBR ACRONYM ADDRESS APPLET AREA B BASE BASEFONT BDO BIG BLOCKQUOTE BODY " +
|
||||||
|
"BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DFN DIR DIV DL DT EM FIELDSET " +
|
||||||
|
"FONT FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 HEAD HR HTML I IFRAME IMG INPUT INS ISINDEX "+
|
||||||
|
"KBD LABEL LEGEND LI LINK MAP MENU META NOFRAMES NOSCRIPT OBJECT OL OPTGROUP OPTION P "+
|
||||||
|
"PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD "+
|
||||||
|
"TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR").split(/\s+/);
|
||||||
|
|
||||||
|
tags.each( function(tag){
|
||||||
|
scope[tag] = function() {
|
||||||
|
return Builder.node.apply(Builder, [tag].concat($A(arguments)));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
1122
js/effects.js
vendored
Normal file
497
js/lightbox.js
Normal file
@ -0,0 +1,497 @@
|
|||||||
|
// -----------------------------------------------------------------------------------
|
||||||
|
//
|
||||||
|
// Lightbox v2.04
|
||||||
|
// by Lokesh Dhakar - http://www.lokeshdhakar.com
|
||||||
|
// Last Modification: 2/9/08
|
||||||
|
//
|
||||||
|
// For more information, visit:
|
||||||
|
// http://lokeshdhakar.com/projects/lightbox2/
|
||||||
|
//
|
||||||
|
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
|
||||||
|
// - Free for use in both personal and commercial projects
|
||||||
|
// - Attribution requires leaving author name, author link, and the license info intact.
|
||||||
|
//
|
||||||
|
// Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
|
||||||
|
// Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
|
||||||
|
//
|
||||||
|
// -----------------------------------------------------------------------------------
|
||||||
|
/*
|
||||||
|
|
||||||
|
Table of Contents
|
||||||
|
-----------------
|
||||||
|
Configuration
|
||||||
|
|
||||||
|
Lightbox Class Declaration
|
||||||
|
- initialize()
|
||||||
|
- updateImageList()
|
||||||
|
- start()
|
||||||
|
- changeImage()
|
||||||
|
- resizeImageContainer()
|
||||||
|
- showImage()
|
||||||
|
- updateDetails()
|
||||||
|
- updateNav()
|
||||||
|
- enableKeyboardNav()
|
||||||
|
- disableKeyboardNav()
|
||||||
|
- keyboardAction()
|
||||||
|
- preloadNeighborImages()
|
||||||
|
- end()
|
||||||
|
|
||||||
|
Function Calls
|
||||||
|
- document.observe()
|
||||||
|
|
||||||
|
*/
|
||||||
|
// -----------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
//
|
||||||
|
// Configurationl
|
||||||
|
//
|
||||||
|
LightboxOptions = Object.extend({
|
||||||
|
fileLoadingImage: 'images/loading.gif',
|
||||||
|
fileBottomNavCloseImage: 'images/closelabel.gif',
|
||||||
|
|
||||||
|
overlayOpacity: 0.8, // controls transparency of shadow overlay
|
||||||
|
|
||||||
|
animate: true, // toggles resizing animations
|
||||||
|
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
|
||||||
|
|
||||||
|
borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
|
||||||
|
|
||||||
|
// When grouping images this is used to write: Image # of #.
|
||||||
|
// Change it for non-english localization
|
||||||
|
labelImage: "Image",
|
||||||
|
labelOf: "of"
|
||||||
|
}, window.LightboxOptions || {});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
var Lightbox = Class.create();
|
||||||
|
|
||||||
|
Lightbox.prototype = {
|
||||||
|
imageArray: [],
|
||||||
|
activeImage: undefined,
|
||||||
|
|
||||||
|
// initialize()
|
||||||
|
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
|
||||||
|
// the function inserts html at the bottom of the page which is used to display the shadow
|
||||||
|
// overlay and the image container.
|
||||||
|
//
|
||||||
|
initialize: function() {
|
||||||
|
|
||||||
|
this.updateImageList();
|
||||||
|
|
||||||
|
this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
|
||||||
|
|
||||||
|
if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
|
||||||
|
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;
|
||||||
|
|
||||||
|
this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
|
||||||
|
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
|
||||||
|
|
||||||
|
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
|
||||||
|
// If animations are turned off, it will be hidden as to prevent a flicker of a
|
||||||
|
// white 250 by 250 box.
|
||||||
|
var size = (LightboxOptions.animate ? 250 : 1) + 'px';
|
||||||
|
|
||||||
|
|
||||||
|
// Code inserts html at the bottom of the page that looks similar to this:
|
||||||
|
//
|
||||||
|
// <div id="overlay"></div>
|
||||||
|
// <div id="lightbox">
|
||||||
|
// <div id="outerImageContainer">
|
||||||
|
// <div id="imageContainer">
|
||||||
|
// <img id="lightboxImage">
|
||||||
|
// <div style="" id="hoverNav">
|
||||||
|
// <a href="#" id="prevLink"></a>
|
||||||
|
// <a href="#" id="nextLink"></a>
|
||||||
|
// </div>
|
||||||
|
// <div id="loading">
|
||||||
|
// <a href="#" id="loadingLink">
|
||||||
|
// <img src="images/loading.gif">
|
||||||
|
// </a>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <div id="imageDataContainer">
|
||||||
|
// <div id="imageData">
|
||||||
|
// <div id="imageDetails">
|
||||||
|
// <span id="caption"></span>
|
||||||
|
// <span id="numberDisplay"></span>
|
||||||
|
// </div>
|
||||||
|
// <div id="bottomNav">
|
||||||
|
// <a href="#" id="bottomNavClose">
|
||||||
|
// <img src="images/close.gif">
|
||||||
|
// </a>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
|
||||||
|
var objBody = $$('body')[0];
|
||||||
|
|
||||||
|
objBody.appendChild(Builder.node('div',{id:'overlay'}));
|
||||||
|
|
||||||
|
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
|
||||||
|
Builder.node('div',{id:'outerImageContainer'},
|
||||||
|
Builder.node('div',{id:'imageContainer'}, [
|
||||||
|
Builder.node('img',{id:'lightboxImage'}),
|
||||||
|
Builder.node('div',{id:'hoverNav'}, [
|
||||||
|
Builder.node('a',{id:'prevLink', href: '#' }),
|
||||||
|
Builder.node('a',{id:'nextLink', href: '#' })
|
||||||
|
]),
|
||||||
|
Builder.node('div',{id:'loading'},
|
||||||
|
Builder.node('a',{id:'loadingLink', href: '#' },
|
||||||
|
Builder.node('img', {src: LightboxOptions.fileLoadingImage})
|
||||||
|
)
|
||||||
|
)
|
||||||
|
])
|
||||||
|
),
|
||||||
|
Builder.node('div', {id:'imageDataContainer'},
|
||||||
|
Builder.node('div',{id:'imageData'}, [
|
||||||
|
Builder.node('div',{id:'imageDetails'}, [
|
||||||
|
Builder.node('span',{id:'caption'}),
|
||||||
|
Builder.node('span',{id:'numberDisplay'})
|
||||||
|
]),
|
||||||
|
Builder.node('div',{id:'bottomNav'},
|
||||||
|
Builder.node('a',{id:'bottomNavClose', href: '#' },
|
||||||
|
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
|
||||||
|
)
|
||||||
|
)
|
||||||
|
])
|
||||||
|
)
|
||||||
|
]));
|
||||||
|
|
||||||
|
|
||||||
|
$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
|
||||||
|
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
|
||||||
|
$('outerImageContainer').setStyle({ width: size, height: size });
|
||||||
|
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
|
||||||
|
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
|
||||||
|
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
|
||||||
|
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
|
||||||
|
|
||||||
|
var th = this;
|
||||||
|
(function(){
|
||||||
|
var ids =
|
||||||
|
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
|
||||||
|
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
|
||||||
|
$w(ids).each(function(id){ th[id] = $(id); });
|
||||||
|
}).defer();
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// updateImageList()
|
||||||
|
// Loops through anchor tags looking for 'lightbox' references and applies onclick
|
||||||
|
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
|
||||||
|
//
|
||||||
|
updateImageList: function() {
|
||||||
|
this.updateImageList = Prototype.emptyFunction;
|
||||||
|
|
||||||
|
document.observe('click', (function(event){
|
||||||
|
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
|
||||||
|
if (target) {
|
||||||
|
event.stop();
|
||||||
|
this.start(target);
|
||||||
|
}
|
||||||
|
}).bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// start()
|
||||||
|
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
|
||||||
|
//
|
||||||
|
start: function(imageLink) {
|
||||||
|
|
||||||
|
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
|
||||||
|
|
||||||
|
// stretch overlay to fill page and fade in
|
||||||
|
var arrayPageSize = this.getPageSize();
|
||||||
|
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
|
||||||
|
|
||||||
|
new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
|
||||||
|
|
||||||
|
this.imageArray = [];
|
||||||
|
var imageNum = 0;
|
||||||
|
|
||||||
|
if ((imageLink.rel == 'lightbox')){
|
||||||
|
// if image is NOT part of a set, add single image to imageArray
|
||||||
|
this.imageArray.push([imageLink.href, imageLink.title]);
|
||||||
|
} else {
|
||||||
|
// if image is part of a set..
|
||||||
|
this.imageArray =
|
||||||
|
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
|
||||||
|
collect(function(anchor){ return [anchor.href, anchor.title]; }).
|
||||||
|
uniq();
|
||||||
|
|
||||||
|
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// calculate top and left offset for the lightbox
|
||||||
|
var arrayPageScroll = document.viewport.getScrollOffsets();
|
||||||
|
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
|
||||||
|
var lightboxLeft = arrayPageScroll[0];
|
||||||
|
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
|
||||||
|
|
||||||
|
this.changeImage(imageNum);
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// changeImage()
|
||||||
|
// Hide most elements and preload image in preparation for resizing image container.
|
||||||
|
//
|
||||||
|
changeImage: function(imageNum) {
|
||||||
|
|
||||||
|
this.activeImage = imageNum; // update global var
|
||||||
|
|
||||||
|
// hide elements during transition
|
||||||
|
if (LightboxOptions.animate) this.loading.show();
|
||||||
|
this.lightboxImage.hide();
|
||||||
|
this.hoverNav.hide();
|
||||||
|
this.prevLink.hide();
|
||||||
|
this.nextLink.hide();
|
||||||
|
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
|
||||||
|
this.imageDataContainer.setStyle({opacity: .0001});
|
||||||
|
this.numberDisplay.hide();
|
||||||
|
|
||||||
|
var imgPreloader = new Image();
|
||||||
|
|
||||||
|
// once image is preloaded, resize image container
|
||||||
|
|
||||||
|
|
||||||
|
imgPreloader.onload = (function(){
|
||||||
|
this.lightboxImage.src = this.imageArray[this.activeImage][0];
|
||||||
|
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
|
||||||
|
}).bind(this);
|
||||||
|
imgPreloader.src = this.imageArray[this.activeImage][0];
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// resizeImageContainer()
|
||||||
|
//
|
||||||
|
resizeImageContainer: function(imgWidth, imgHeight) {
|
||||||
|
|
||||||
|
// get current width and height
|
||||||
|
var widthCurrent = this.outerImageContainer.getWidth();
|
||||||
|
var heightCurrent = this.outerImageContainer.getHeight();
|
||||||
|
|
||||||
|
// get new width and height
|
||||||
|
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
|
||||||
|
var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
|
||||||
|
|
||||||
|
// scalars based on change from old to new
|
||||||
|
var xScale = (widthNew / widthCurrent) * 100;
|
||||||
|
var yScale = (heightNew / heightCurrent) * 100;
|
||||||
|
|
||||||
|
// calculate size difference between new and old image, and resize if necessary
|
||||||
|
var wDiff = widthCurrent - widthNew;
|
||||||
|
var hDiff = heightCurrent - heightNew;
|
||||||
|
|
||||||
|
if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
|
||||||
|
if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
|
||||||
|
|
||||||
|
// if new and old image are same size and no scaling transition is necessary,
|
||||||
|
// do a quick pause to prevent image flicker.
|
||||||
|
var timeout = 0;
|
||||||
|
if ((hDiff == 0) && (wDiff == 0)){
|
||||||
|
timeout = 100;
|
||||||
|
if (Prototype.Browser.IE) timeout = 250;
|
||||||
|
}
|
||||||
|
|
||||||
|
(function(){
|
||||||
|
this.prevLink.setStyle({ height: imgHeight + 'px' });
|
||||||
|
this.nextLink.setStyle({ height: imgHeight + 'px' });
|
||||||
|
this.imageDataContainer.setStyle({ width: widthNew + 'px' });
|
||||||
|
|
||||||
|
this.showImage();
|
||||||
|
}).bind(this).delay(timeout / 1000);
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// showImage()
|
||||||
|
// Display image and begin preloading neighbors.
|
||||||
|
//
|
||||||
|
showImage: function(){
|
||||||
|
this.loading.hide();
|
||||||
|
new Effect.Appear(this.lightboxImage, {
|
||||||
|
duration: this.resizeDuration,
|
||||||
|
queue: 'end',
|
||||||
|
afterFinish: (function(){ this.updateDetails(); }).bind(this)
|
||||||
|
});
|
||||||
|
this.preloadNeighborImages();
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// updateDetails()
|
||||||
|
// Display caption, image number, and bottom nav.
|
||||||
|
//
|
||||||
|
updateDetails: function() {
|
||||||
|
|
||||||
|
// if caption is not null
|
||||||
|
if (this.imageArray[this.activeImage][1] != ""){
|
||||||
|
this.caption.update(this.imageArray[this.activeImage][1]).show();
|
||||||
|
}
|
||||||
|
|
||||||
|
// if image is part of set display 'Image x of x'
|
||||||
|
if (this.imageArray.length > 1){
|
||||||
|
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
|
||||||
|
}
|
||||||
|
|
||||||
|
new Effect.Parallel(
|
||||||
|
[
|
||||||
|
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
|
||||||
|
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
|
||||||
|
],
|
||||||
|
{
|
||||||
|
duration: this.resizeDuration,
|
||||||
|
afterFinish: (function() {
|
||||||
|
// update overlay size and update nav
|
||||||
|
var arrayPageSize = this.getPageSize();
|
||||||
|
this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
|
||||||
|
this.updateNav();
|
||||||
|
}).bind(this)
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// updateNav()
|
||||||
|
// Display appropriate previous and next hover navigation.
|
||||||
|
//
|
||||||
|
updateNav: function() {
|
||||||
|
|
||||||
|
this.hoverNav.show();
|
||||||
|
|
||||||
|
// if not first image in set, display prev image button
|
||||||
|
if (this.activeImage > 0) this.prevLink.show();
|
||||||
|
|
||||||
|
// if not last image in set, display next image button
|
||||||
|
if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
|
||||||
|
|
||||||
|
this.enableKeyboardNav();
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// enableKeyboardNav()
|
||||||
|
//
|
||||||
|
enableKeyboardNav: function() {
|
||||||
|
document.observe('keydown', this.keyboardAction);
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// disableKeyboardNav()
|
||||||
|
//
|
||||||
|
disableKeyboardNav: function() {
|
||||||
|
document.stopObserving('keydown', this.keyboardAction);
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// keyboardAction()
|
||||||
|
//
|
||||||
|
keyboardAction: function(event) {
|
||||||
|
var keycode = event.keyCode;
|
||||||
|
|
||||||
|
var escapeKey;
|
||||||
|
if (event.DOM_VK_ESCAPE) { // mozilla
|
||||||
|
escapeKey = event.DOM_VK_ESCAPE;
|
||||||
|
} else { // ie
|
||||||
|
escapeKey = 27;
|
||||||
|
}
|
||||||
|
|
||||||
|
var key = String.fromCharCode(keycode).toLowerCase();
|
||||||
|
|
||||||
|
if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
|
||||||
|
this.end();
|
||||||
|
} else if ((key == 'p') || (keycode == 37)){ // display previous image
|
||||||
|
if (this.activeImage != 0){
|
||||||
|
this.disableKeyboardNav();
|
||||||
|
this.changeImage(this.activeImage - 1);
|
||||||
|
}
|
||||||
|
} else if ((key == 'n') || (keycode == 39)){ // display next image
|
||||||
|
if (this.activeImage != (this.imageArray.length - 1)){
|
||||||
|
this.disableKeyboardNav();
|
||||||
|
this.changeImage(this.activeImage + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// preloadNeighborImages()
|
||||||
|
// Preload previous and next images.
|
||||||
|
//
|
||||||
|
preloadNeighborImages: function(){
|
||||||
|
var preloadNextImage, preloadPrevImage;
|
||||||
|
if (this.imageArray.length > this.activeImage + 1){
|
||||||
|
preloadNextImage = new Image();
|
||||||
|
preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
|
||||||
|
}
|
||||||
|
if (this.activeImage > 0){
|
||||||
|
preloadPrevImage = new Image();
|
||||||
|
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// end()
|
||||||
|
//
|
||||||
|
end: function() {
|
||||||
|
this.disableKeyboardNav();
|
||||||
|
this.lightbox.hide();
|
||||||
|
new Effect.Fade(this.overlay, { duration: this.overlayDuration });
|
||||||
|
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// getPageSize()
|
||||||
|
//
|
||||||
|
getPageSize: function() {
|
||||||
|
|
||||||
|
var xScroll, yScroll;
|
||||||
|
|
||||||
|
if (window.innerHeight && window.scrollMaxY) {
|
||||||
|
xScroll = window.innerWidth + window.scrollMaxX;
|
||||||
|
yScroll = window.innerHeight + window.scrollMaxY;
|
||||||
|
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
|
||||||
|
xScroll = document.body.scrollWidth;
|
||||||
|
yScroll = document.body.scrollHeight;
|
||||||
|
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
||||||
|
xScroll = document.body.offsetWidth;
|
||||||
|
yScroll = document.body.offsetHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
var windowWidth, windowHeight;
|
||||||
|
|
||||||
|
if (self.innerHeight) { // all except Explorer
|
||||||
|
if(document.documentElement.clientWidth){
|
||||||
|
windowWidth = document.documentElement.clientWidth;
|
||||||
|
} else {
|
||||||
|
windowWidth = self.innerWidth;
|
||||||
|
}
|
||||||
|
windowHeight = self.innerHeight;
|
||||||
|
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
||||||
|
windowWidth = document.documentElement.clientWidth;
|
||||||
|
windowHeight = document.documentElement.clientHeight;
|
||||||
|
} else if (document.body) { // other Explorers
|
||||||
|
windowWidth = document.body.clientWidth;
|
||||||
|
windowHeight = document.body.clientHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// for small pages with total height less then height of the viewport
|
||||||
|
if(yScroll < windowHeight){
|
||||||
|
pageHeight = windowHeight;
|
||||||
|
} else {
|
||||||
|
pageHeight = yScroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
// for small pages with total width less then width of the viewport
|
||||||
|
if(xScroll < windowWidth){
|
||||||
|
pageWidth = xScroll;
|
||||||
|
} else {
|
||||||
|
pageWidth = windowWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [pageWidth,pageHeight];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.observe('dom:loaded', function () { new Lightbox(); });
|
||||||
4221
js/prototype.js
vendored
Normal file
58
js/scriptaculous.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
// script.aculo.us scriptaculous.js v1.8.1, Thu Jan 03 22:07:12 -0500 2008
|
||||||
|
|
||||||
|
// Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
|
//
|
||||||
|
// Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
// a copy of this software and associated documentation files (the
|
||||||
|
// "Software"), to deal in the Software without restriction, including
|
||||||
|
// without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||||
|
// permit persons to whom the Software is furnished to do so, subject to
|
||||||
|
// the following conditions:
|
||||||
|
//
|
||||||
|
// The above copyright notice and this permission notice shall be
|
||||||
|
// included in all copies or substantial portions of the Software.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||||
|
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||||
|
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||||
|
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||||
|
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
//
|
||||||
|
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||||
|
|
||||||
|
var Scriptaculous = {
|
||||||
|
Version: '1.8.1',
|
||||||
|
require: function(libraryName) {
|
||||||
|
// inserting via DOM fails in Safari 2.0, so brute force approach
|
||||||
|
document.write('<script type="text/javascript" src="'+libraryName+'"><\/script>');
|
||||||
|
},
|
||||||
|
REQUIRED_PROTOTYPE: '1.6.0',
|
||||||
|
load: function() {
|
||||||
|
function convertVersionString(versionString){
|
||||||
|
var r = versionString.split('.');
|
||||||
|
return parseInt(r[0])*100000 + parseInt(r[1])*1000 + parseInt(r[2]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if((typeof Prototype=='undefined') ||
|
||||||
|
(typeof Element == 'undefined') ||
|
||||||
|
(typeof Element.Methods=='undefined') ||
|
||||||
|
(convertVersionString(Prototype.Version) <
|
||||||
|
convertVersionString(Scriptaculous.REQUIRED_PROTOTYPE)))
|
||||||
|
throw("script.aculo.us requires the Prototype JavaScript framework >= " +
|
||||||
|
Scriptaculous.REQUIRED_PROTOTYPE);
|
||||||
|
|
||||||
|
$A(document.getElementsByTagName("script")).findAll( function(s) {
|
||||||
|
return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
|
||||||
|
}).each( function(s) {
|
||||||
|
var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
|
||||||
|
var includes = s.src.match(/\?.*load=([a-z,]*)/);
|
||||||
|
(includes ? includes[1] : 'builder,effects,dragdrop,controls,slider,sound').split(',').each(
|
||||||
|
function(include) { Scriptaculous.require(path+include+'.js') });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Scriptaculous.load();
|
||||||
2
robots.txt
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||