Se corrige implementan galerias de imagenes y se corrigen bugs de css

comercial.php

@@ -0,0 +1,27 @@
+<?php
+$GalleryPath = "images/gallerys/comercial/";
+
+$galerias = array(
+    array("id" => "gallery01", "numero" => "01", "nombre" => "Agora / EstudioGGR", "path" => "agora_EstudioGGR", "imageCount" => 4),
+    array("id" => "gallery02", "numero" => "02", "nombre" => "Gazebo / EstudioGGR", "path" => "gazebo_EstudioGGR", "imageCount" => 2),
+    array("id" => "gallery03", "numero" => "03", "nombre" => "TeaGallery_/ EstudioGGR", "path" => "teaGallery_EstudioGGR", "imageCount" => 3),
+);
+?>
+
+<script type="text/javascript">
+    $('#frame').ready(function(){
+
+    });
+    function setAuthorGallery(galleryId){
+        $('[id^=gallery]').hide();
+        $('#'+galleryId).show();
+    }
+    function loadImage(galleryId, path, imageNumber){
+        $('#image-container-'+galleryId).empty();
+        var imgSrc='<?php echo $GalleryPath ?>' + path + '/' + imageNumber+'.jpg';
+        $('#image-container-'+galleryId).html('<img src="'+ imgSrc +'" />');
+    }
+</script>
+
+
+<?php include 'gallery.php'; ?>

css/eterea.css

@@ -1,12 +1,13 @@
 body{
-    background-image: url('/eterea/images/background.jpg');
-    background-size: cover;
-    background-color: beige;
+    margin: 0px;
+    background-image: url('/eterea/images/ETEREA_HomeFondo.jpg');
+    background-repeat: no-repeat;
+    background-size: 100% auto;
     color: #666;
-    font-family: Century Gothic;
+    font-family: 'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;
+
 }
 
-
 /**
 *   Page structure
 */
@@ -17,9 +18,7 @@ body{
 #content{ 
     background-color: white;
     margin: auto;
-    /*    border: 1px #666 solid;*/
     width: 1022px;
-    /*    min-height: 800px;*/
     color: #666;
 }
 
@@ -37,20 +36,25 @@ body{
     background-color: white;
     width: 982px;
     margin: auto;
-    /*    border: 1px #666 solid;*/
     height: 130px;
 }
 
 #container{
-    padding: 20px;
+    background-image: url('../images/container-bg.png');
+    background-position: bottom;
+    background-repeat: no-repeat;
+    display: table;
+    margin: 20px 20px 20px 20px;
+    width: 982px;
 }
 
 .frame{
-    background-color: white;
-    min-height: 750px;
+    min-height: 525px;
 }
 .frame-home{
     background-image: url('../images/home-bg.png'); 
+    display: table;
+    width: 982px;
     height: 500px !important;
 } 
 
@@ -76,31 +80,37 @@ body{
     margin-left: 30px;
 }
 #main-menu li a{
+    font-size: 14px;
     font-weight: bold;
-    color: #666;
+    color: #333333;
     text-decoration: none;
 }
 #main-menu li a:hover{
-    color: #a3195b;
+    color: #BE1622;
+}
+#main-menu li a.active {
+    color: #BE1622;
 }
 
 
 .gallery-title{
     height: 30px;
     line-height: 30px;
-    font-weight: bold;
 }
 .gallery-title span{
     text-align: center;
-    color: white;
+    color: #ffffff;
     height: 30px;
     display: block;
     background-color: #a3195b;
     width: 287px;
     float: left;
     margin-right: 30px;
+    font-size: 18px;
 }
 .gallery-title ul{
+    font-weight: bold;
+    font-size: 14px;
     height: 29px;
     border-top: 1px #a3195b solid;
     border-bottom: 1px #a3195b solid;
@@ -112,7 +122,7 @@ body{
 }
 .gallery-title ul li:hover{
     cursor: pointer;
-    color: #a3195b;
+    color: #BE1622;
 }
 
 .image-container{
@@ -127,10 +137,11 @@ body{
     border-left: 1px #a3195b solid;
     border-right: 1px #a3195b solid;
     width: 180px;
-    min-height: 400px;
+    height: 450px;
     margin-left: 30px;
     margin-top: 20px;
     list-style: none;
+    overflow: hidden;
 }
 .image-selector li{
     margin-bottom: 5px;
@@ -142,6 +153,34 @@ body{
     margin-left: -25px;
     cursor: pointer;
 }
+.frame button{
+    margin-top: 100px;
+    float: left;
+}
+.image-slider{
+    top: 0px;
+    position: relative;
+    display: table;
+}
+.slide-area{
+    margin-top: 230px;
+    float: right;
+    width: 45px;
+    height: 45px;
+    background-image: url('../images/slide-bg.png');
+}
+.slide-area a{
+    line-height: 20px;
+    font-size: 20px;
+    display: block;
+    color: #ffffff;
+    margin-left: 5px;
+    width: 20px;
+}
+.slide-area a:hover{
+    font-weight: bold;
+    cursor: pointer;
+}
 
 #mailto{
     display: block;
@@ -152,9 +191,10 @@ body{
 }
 
 #speach{
+    color: #333333;
     width: 380px;
     margin-left: 380px;
     margin-top: 30px;
-    font-size: 17px;
-    text-align: justify;
+    font-size: 14px;
+    line-height: 20px;
 }

educativa.php

@@ -0,0 +1,25 @@
+<?php
+$GalleryPath = "images/gallerys/educativa/";
+
+$galerias = array(
+    array("id" => "gallery01", "numero" => "01", "nombre" => "Alaska / ArthurChabonOffice", "path" => "alaska_ ArthurChabonOffice", "imageCount" => 6)
+);
+?>
+
+<script type="text/javascript">
+    $('#frame').ready(function(){
+
+    });
+    function setAuthorGallery(galleryId){
+        $('[id^=gallery]').hide();
+        $('#'+galleryId).show();
+    }
+    function loadImage(galleryId, path, imageNumber){
+        $('#image-container-'+galleryId).empty();
+        var imgSrc='<?php echo $GalleryPath ?>' + path + '/' + imageNumber+'.jpg';
+        $('#image-container-'+galleryId).html('<img src="'+ imgSrc +'" />');
+    }
+</script>
+
+
+<?php include 'gallery.php'; ?>

gallery.php

@@ -0,0 +1,30 @@
+<?php foreach ($galerias as $galeria): ?>
+    <div class="frame" id="<?php echo $galeria['id'] ?>" style="<?php if ($galeria['id'] != 'gallery01')
+        echo "display: none"; ?>">
+        <div class="gallery-title">
+            <span><?php echo $galeria['nombre'] ?></span>
+            <ul>
+                <?php foreach ($galerias as $galeria2): ?>
+                    <li onclick="setAuthorGallery('<?php echo $galeria2['id'] ?>');"><?php echo $galeria2['numero'] ?></li>
+                <?php endforeach; ?>
+            </ul>
+        </div>
+
+        <div class="image-container" id="image-container-<?php echo $galeria['id'] ?>">
+            <img src="<?php echo $GalleryPath ?><?php echo $galeria['path'] ?>/1.jpg"/>
+        </div>
+        <div class="image-selector">
+            <div class="image-slider" id="image-slider-<?php echo $galeria["id"] ?>">
+                <ul>
+                    <?php for ($i = 1; $i <= $galeria['imageCount']; $i++): ?>
+                        <li><img src="<?php echo $GalleryPath ?><?php echo $galeria['path'] ?>/<?php echo $i ?>.jpg" onclick='loadImage("<?php echo $galeria['id'] ?>","<?php echo $galeria['path'] ?>","<?php echo $i ?>")' height="255" width="255"/></li>
+                    <?php endfor; ?>
+                </ul>
+            </div>
+        </div>
+        <div class="slide-area">
+            <a onclick="slideThumbsDown('image-slider-<?php echo $galeria["id"] ?>')">&uarr;</a>
+            <a onclick="slideThumbsUp('image-slider-<?php echo $galeria["id"] ?>')">&darr;</a>
+        </div>
+    </div>
+<?php endforeach; ?>

inicio.html → inicio.php

@@ -1,7 +1,7 @@
 <div class="frame-home">
     <div id="speach">
         
-        <p><span style="color:#a3195b">Et&eacute;rea Architectural Rendering</span> está formada por arquitectos con vasta experiencia en el modelado y renderizado de imágenes, especialistas en el material de calidad fotorrealística.</p>
+        <p><span style="color:#BE1622">Et&eacute;rea Architectural Rendering</span> está formada por arquitectos con vasta experiencia en el modelado y renderizado de imágenes, especialistas en el material de calidad fotorrealística.</p>
         
         <p><b>Nuestra meta</b>, brindar a estudios y desarrolladores herramientas que ayuden a comunicar sus ideas y proyectos de manera efectiva.</p>