màj

app/assets/javascripts/public.js.coffee

@@ -8,11 +8,153 @@
 
 
 
+bottom = 0
+prev_link = ""
+
+$ ->  
+
+  position_img_now = ->
+    
+    
+    
+   # alert $("#large .large-img").outerHeight(false)
+    
+    imgheight = $("#large .large-img").outerHeight(false) + $("#large h3").outerHeight(false) 
+    
+     
+    margintop = (( $(window).height() - imgheight) / 2 )
+   
+    $("#large .large-img").css
+      "margin-top" :(margintop+"px")
+      #"width" : "100px"
+
+    
+    
+  position_img = ->
+    $("#large .large-img").one "load", ->
+      
+      position_img_now()
+      
+  $(".rea-gal a").click ->
+    maxwidth = 1000
+    maxheight = 900
+    
+    
+    
+    
+    
+    prev_link = $(this)
+    $("body").append "<div id='large'></div>"
+    title = false
+    
+    
+    $("#large").append "<img src='/arrow-next.png' class='next' />"
+    $("#large").append "<img src='/arrow-prev.png' class='prev' />"
+    $("#large").append "<img src='/close.png' class='close_link' />"
+    
+    $("#large").append "<div class='img_container first'></div>"
+    $(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
+    
+    if $(this).attr "title"
+      title = $(this).attr "title"
+      $(".img_container.first").append "<h3>"+title+"</h3>"
+      
+    $("#large .large-img").one "load", ->
+      $("#large").fadeIn(500)
+    position_img();
+    if $(window).height() > (maxheight+100)
+      $("#large .large-img").css
+        "max-height" : maxheight
+    else
+      $("#large .large-img").css
+        "max-height" : "85%"
+        
+    if $(window).width() > (maxwidth+100)
+      $("#large .large-img").css
+        "max-width" : maxwidth
+    else
+      $("#large .large-img").css
+        "max-width" : "85%"
+    
+    position_img();
+    
+    
+    false
+  
+  
+  
+  $("body").on "click", "#large", ->
+    $(this).fadeOut 300, ->
+      $(this).remove()
+    
+    
+  $("body").on "click" ,"#large .prev",->
+    
+    if prev_link.prev("a").length > 0
+      link = prev_link.closest("a").prev("a")
+      
+      
+      
+    else
+      link = prev_link.closest("div").children("a:last")
+    
+   
+    #titre = photo.find("h3")
+    $(".img_container.first").fadeOut 300, ->
+      $("#large h3").remove()
+      if link.attr "title"
+        title = link.attr "title"
+        $(".img_container.first").append "<h3>"+title+"</h3>"
+      
+      
+      $('#large .large-img').attr("src", link.attr("href"))
+      $("#large .large-img").one "load", ->
+        $(".img_container.first").fadeIn()
+      position_img();
+    prev_link = link
+    
+    false
+  
+  
+  $("body").on "click" ,"#large .next",->
+    
+    if prev_link.next("a").length > 0
+      link = prev_link.closest("a").next("a")
+      
+      
+      
+    else
+      link = prev_link.closest("div").children("a:first")
+    
+   
+    #titre = photo.find("h3")
+    
+    $(".img_container.first").fadeOut 300, ->
+      $("#large h3").remove()
+      if link.attr "title"
+        title = link.attr "title"
+        $(".img_container.first").append "<h3>"+title+"</h3>"
+      
+      $('#large .large-img').attr("src", link.attr("href"))
+      $("#large .large-img").one "load", ->
+        $(".img_container.first").fadeIn()
+      position_img();
+    prev_link = link
+    
+    false
+
+
+
+
+
 
 resize = () ->
+  
+
   $("#large").css "min-height", ($(window).height()-30)+"px"
   
   
+  
   height = ($(window).height()-50)
   optimal_height = $(window).width()/ 1.66
   if optimal_height < height

app/assets/stylesheets/public.scss

@@ -4,6 +4,89 @@
 @import "bootstrap/bootstrap";
 @import "superslides";
 
+
+#large{
+  display:none;
+  position:fixed;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background:rgba(0,0,0,0.8);
+  z-index:10;
+  
+  background:white;
+  background:rgba(255, 255, 255, 0.98);
+  .close_link{
+    position:fixed;
+    top:10px;
+    right:10px;
+    width:25px;
+    cursor:pointer;
+  
+  }
+  
+
+   h3{
+     color:white;
+     text-align:center;
+     margin-top:5px;
+     margin-bottom:0;
+     font-weight:300;
+     font-size:0.95em;
+ 
+   }
+  .next, .prev{
+    width:20px;
+    position:absolute;
+    top:50%;
+    transform:translateY(-50%);
+    cursor:pointer;
+
+  }
+  .prev{
+    left:15px;
+  }
+  .next{
+    right:15px;
+  }
+ 
+  .img_container{
+    height:100%;
+    width:100%;
+    box-sizing: border-box;
+
+   .large-img{
+      box-shadow:0 0 8px rgba(0, 0, 0, 1);
+      cursor:pointer;
+      
+      background:rgba(250, 250, 250, 0.9);
+      display:block;
+      margin:auto;
+    }
+  }
+}
+
+.rea-gal{
+  padding-left:0px;
+
+  margin-right:-5px;
+  margin-bottom:-5px;
+  img{
+  padding-right:5px;
+  padding-bottom:5px;
+    //width:200px;
+    height:150px;
+  
+    box-sizing: border-box;
+    &:hover{
+      opacity:0.8;
+      
+    }
+  }
+}
+
+
 .info{
   padding:1em;
   background:#e10716;
@@ -279,7 +362,7 @@ padding:0.5em;
 
 }
 
-#environement,#fournisseur, #societe, #design, #contact, #miele{
+#environement,#fournisseur,#realisations, #societe, #design, #contact, #miele{
 padding:4em 1em;
 
 }
@@ -329,8 +412,13 @@ padding:0.5em;
 }
 
 }
-
+#realisations{
-#societe, #contact{
+  background:black;
+  color:white;
+  text-align:center;
+  
+}
+#societe, #contact, #realisations{
 h3{
 margin-bottom:1em;
 line-height:1.62em;

app/views/layouts/public.html.haml

@@ -60,7 +60,7 @@
             inherit_height_from: '.slider',
         
         
-            play :8000,
+            play :2000,
             animation_speed : 800,
             animation_easing : "swing"
           });
@@ -78,9 +78,23 @@
     
     .info
       %p
-        OPPORTUNITÉ : Nous disposons d'emplacements privilégiés disponibles rapidement sur des parkings de centres commerciaux dans les villes de Bayonne, Angoulême, Montargis et Béziers -
+        OPPORTUNITÉ : Nous disposons d'emplacements privilégiés disponibles rapidement sur des parkings de centres commerciaux dans les villes de Bordeaux, Angoulême, Montargis et Béziers -
         =link_to "N'hésitez pas à nous contacter.", "#contact"
     
+    
+    #realisations
+      %h3 Nos dernières réalisations...
+      
+      .rea-gal.img_gallery
+        =link_to image_tag("laverie-4.jpg"), asset_path("laverie-4.jpg")
+        =link_to image_tag("laverie-5.jpg"), asset_path("laverie-5.jpg")
+        =link_to image_tag("laverie-3.jpg"), asset_path("laverie-3.jpg")
+        =link_to image_tag("laverie-1.jpg"), asset_path("laverie-1.jpg")
+        =link_to image_tag("laverie-3.jpg"), asset_path("laverie-3.jpg")
+        =link_to image_tag("laverie-6.jpg"), asset_path("laverie-6.jpg")
+        =link_to image_tag("laverie-7.jpg"), asset_path("laverie-7.jpg")
+
+      .clear
     #societe
       %h3
         Nous sommes là pour vous accompagner dans votre 
@@ -97,6 +111,7 @@
         Avec nos solutions en bungalow ou en local vous mettez un lieu agréable, propre, avec un équipement de qualité à disposition de vos clients. Que ce soit sur un parking de supermarché ou en bas d’un immeuble de centre-ville.
     
     
+    
     #perfect  
       %h2
         A la recherche de l'excellence.