- Nueva sección "Hogar".

git-svn-id: https://192.168.0.254/svn/Proyectos.Miguelo_Web/trunk@30 ec840e86-4cc9-48bc-81da-089286ec179e

src/hogar.html

@@ -29,15 +29,15 @@
       &nbsp;</h1>
       <p>&nbsp;</p>
       <!--p>&nbsp;</p-->
-      <a href="hogar/comodas-mesillas-hogar.jpg" rel="lightbox"><img src="hogar/comodas-mesillas-hogar_small.jpg" width="180" height="141" border="0" /></a>
+      <a href="hogar/comodas-mesillas-hogar.jpg" rel="lightbox[hogar]"><img src="hogar/comodas-mesillas-hogar_small.jpg" width="180" height="141" border="0" /></a>
       &nbsp;&nbsp;
-      <a href="hogar/sillas-hogar.jpg" rel="lightbox"><img src="hogar/sillas-hogar_small.jpg" width="180" height="141" border="0" /></a>
+      <a href="hogar/sillas-hogar.jpg" rel="lightbox[hogar]"><img src="hogar/sillas-hogar_small.jpg" width="180" height="141" border="0" /></a>
       &nbsp;&nbsp;
-      <a href="hogar/cuadros-hogar.jpg" rel="lightbox"><img src="hogar/cuadros-hogar_small.jpg" width="180" height="141" border="0" /></a>
+      <a href="hogar/cuadros-hogar.jpg" rel="lightbox[hogar]"><img src="hogar/cuadros-hogar_small.jpg" width="180" height="141" border="0" /></a>
 	<br /><br/>
-      <a href="hogar/lamparas-hogar.jpg" rel="lightbox"><img src="hogar/lamparas-hogar_small.jpg" width="180" height="141" border="0" /></a>
+      <a href="hogar/lamparas-hogar.jpg" rel="lightbox[hogar]"><img src="hogar/lamparas-hogar_small.jpg" width="180" height="141" border="0" /></a>
       &nbsp;&nbsp;
-      <a href="hogar/sofas-hogar.jpg" rel="lightbox"><img src="hogar/sofas-hogar_small.jpg" width="180" height="141" border="0" /></a>      
+      <a href="hogar/sofas-hogar.jpg" rel="lightbox[hogar]"><img src="hogar/sofas-hogar_small.jpg" width="180" height="141" border="0" /></a>      
     </center>
   </div>
 </div>

src/lightbox.css

@@ -1,104 +1,123 @@
-#lightbox{
+#lightbox {
-	position: absolute;
+	position: absolute;
-	top: 40px;
+	top: 40px;
-	left: 0;
+	left: 0;
-	width: 100%;
+	width: 100%;
-	z-index: 100;
+	z-index: 100;
-	text-align: center;
+	text-align: center;
-	line-height: 0;
+	line-height: 0;
-	}
+}
-
+#lightbox a img {
-#lightbox a img{ border: none; }
+	border: none;
-
+}
-#outerImageContainer{
+#outerImageContainer {
-	position: relative;
+	position: relative;
-	background-color: #fff;
+	background-color: #fff;
-	width: 250px;
+	width: 250px;
-	height: 250px;
+	height: 250px;
-	margin: 0 auto;
+	margin: 0 auto;
-	}
+}
-
+#imageContainer {
-#imageContainer{
+	padding: 10px;
-	padding: 10px;
+}
-	}
+#loading {
-
+	position: absolute;
-#loading{
+	top: 40%;
-	position: absolute;
+	left: 0%;
-	top: 40%;
+	height: 25%;
-	left: 0%;
+	width: 100%;
-	height: 25%;
+	text-align: center;
-	width: 100%;
+	line-height: 0;
-	text-align: center;
+}
-	line-height: 0;
+#hoverNav {
-	}
+	position: absolute;
-#hoverNav{
+	top: 0;
-	position: absolute;
+	left: 0;
-	top: 0;
+	height: 100%;
-	left: 0;
+	width: 100%;
-	height: 100%;
+	z-index: 10;
-	width: 100%;
+}
-	z-index: 10;
+#imageContainer>#hoverNav {
-	}
+	left: 0;
-#imageContainer>#hoverNav{ left: 0;}
+}
-#hoverNav a{ outline: none;}
+#hoverNav a {
-
+	outline: none;
-#prevLink, #nextLink{
+}
-	width: 49%;
+#prevLink, #nextLink {
-	height: 100%;
+	width: 49%;
-	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
+	height: 100%;
-	display: block;
+	background: transparent url(/images/blank.gif) no-repeat; /* Trick IE into showing hover */
-	}
+	display: block;
-#prevLink { left: 0; float: left;}
+}
-#nextLink { right: 0; float: right;}
+#prevLink {
-#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
+	left: 0;
-#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
+	float: left;
-
+}
-
+#nextLink {
-#imageDataContainer{
+	right: 0;
-	font: 10px Verdana, Helvetica, sans-serif;
+	float: right;
-	background-color: #fff;
+}
-	margin: 0 auto;
+#prevLink:hover, #prevLink:visited:hover {
-	line-height: 1.4em;
+	background: url(/images/prevlabel.gif) left 15% no-repeat;
-	}
+}
-
+#nextLink:hover, #nextLink:visited:hover {
-#imageData{
+	background: url(/images/nextlabel.gif) right 15% no-repeat;
-	padding:0 10px;
+}
-	}
+#imageDataContainer {
-#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
+	font: 10px Verdana, Helvetica, sans-serif;
-#imageData #caption{ font-weight: bold;	}
+	background-color: #fff;
-#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
+	margin: 0 auto;
-#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
+	line-height: 1.4em;
-		
+}
-#overlay{
+#imageData {
-	position: absolute;
+	padding:0 10px;
-	top: 0;
+}
-	left: 0;
+#imageData #imageDetails {
-	z-index: 90;
+	width: 70%;
-	width: 100%;
+	float: left;
-#	height: 500px;
+	text-align: left;
-	background-color: #000;
+}
-	filter:alpha(opacity=60);
+#imageData #caption {
-	-moz-opacity: 0.6;
+	font-weight: bold;
-	opacity: 0.6;
+}
-	}
+#imageData #numberDisplay {
-	
+	display: block;
-
+	clear: left;
-.clearfix:after {
+	padding-bottom: 1.0em;
-	content: "."; 
+}
-	display: block; 
+#imageData #bottomNavClose {
-	height: 0; 
+	width: 66px;
-	clear: both; 
+	float: right;
-	visibility: hidden;
+	padding-bottom: 0.7em;
-	}
+}
-
+#overlay {
-* html>body .clearfix {
+	position: absolute;
-	display: inline-block; 
+	top: 0;
-	width: 100%;
+	left: 0;
-	}
+	z-index: 90;
-
+	width: 100%;
-* html .clearfix {
+ # height: 500px;
-	/* Hides from IE-mac \*/
+	background-color: #000;
-	height: 1%;
+	filter:alpha(opacity=60);
-	/* End hide from IE-mac */
+	-moz-opacity: 0.6;
-	}	
+	opacity: 0.6;
-	
+}
+.clearfix:after {
+	content: ".";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+}
+* html>body .clearfix {
+	display: inline-block;
+	width: 100%;
+}
+* html .clearfix {
+	/* Hides from IE-mac \*/
+
+
+	height: 1%;/* End hide from IE-mac */
+
+
+	}