affichage galeries

app/assets/javascripts/public.coffee

@@ -42,16 +42,73 @@ $.fn.animateBG = (x, y, speed) ->
 
 $ ->
 
+  prev_link = ""
  
+  $(document).on "click", ".gallery .photo a", ->
+    
+    prev_link = $(this)
+   
+    
+    $('#photo_large_place').fadeIn();
+    $('#photo_large_place .big_img').attr("src", $(this).attr("href"))
+    $('#photo_large_place .big_img').css("max-height", ($(window).height()-130)+"px")
+  
+    
+    $('#photo_large_place').find("h3").html($(this).closest(".photo").find("h3").html())
+    
+    
+    return false
+
+    
+  $("#photo_large_place .next-photo").click ->
+    
+    if prev_link.closest(".photo").next(".photo").length > 0
+      photo = prev_link.closest(".photo").next(".photo")
+      
+      
+      
+    else
+      photo = prev_link.closest(".gallery").children(".photo:first")
+    
+    link = photo.find("a:first")
+    titre = photo.find("h3")
+    $('#photo_large_place .big_img').attr("src", link.attr("href"))
+    $('#photo_large_place').find("h3").html(titre.html())
+    
+    prev_link = link
+      
+      
+  
+  
+  
+  $("#photo_large_place .prev-photo").click ->
+    
+    if prev_link.closest(".photo").prev(".photo").length > 0
+      photo = prev_link.closest(".photo").prev(".photo")
+      
+      
+      
+    else
+      photo = prev_link.closest(".gallery").children(".photo:last")
+    
+    link = photo.find("a:first")
+    titre = photo.find("h3")
+    $('#photo_large_place .big_img').attr("src", link.attr("href"))
+    $('#photo_large_place').find("h3").html(titre.html())
+    
+    prev_link = link
+    
+    
+    
+    
   
 
-  $("a[rel^='prettyPhoto']:visible").fancybox({
-    helpers : {
-      title: {
-        type: 'inside'
-      }
-    }
-    })
+
+    
+    
+
+  $(document).on "click", '#photo_large_place .close_large', ->
+    $('#photo_large_place').fadeOut()
 
   
  

app/assets/stylesheets/public/inner.less

@@ -1,3 +1,10 @@
+.big_img{
+
+max-height:100%;
+
+}
+
+
 #main_content{
 .row-fluid{
 margin:0px;

app/assets/stylesheets/public/structure.less

@@ -221,6 +221,20 @@ z-index:7;
 display:none;
 
 
+}
+
+#photo_large_place{
+background:rgba(233,229,226,1);
+position:fixed;
+text-align:center;
+top:0;
+left:0;
+width:100%;
+height:100%;
+z-index:7;
+display:none;
+
+
 }
 
 @media only screen and (max-width: 1100px) {

app/models/gallery_content.rb

@@ -4,7 +4,7 @@ class GalleryContent < ActiveRecord::Base
   
   has_one :portlet, :as => :content, :dependent => :destroy
   
-  STYLES = [["Petites miniatures",1], ["Diaporama",2], ["Petits carrés",3], ["Réalisations",4]]
+  STYLES = [["Petites miniatures",1], ["Carrés",2]]
 
 	def dup
 		@new = GalleryContent.new(self.attributes)

app/models/gallery_image.rb

@@ -4,7 +4,7 @@ class GalleryImage < ActiveRecord::Base
   belongs_to :gallery
 	belongs_to :gallery_content
 
-  validates :title, :presence => true
+  #validates :title, :presence => true
   
   
   def tags_class

app/views/layouts/public.html.haml

@@ -86,9 +86,36 @@
       %h3 Danielle Riche
       
     #large_place
+    
+    
+    #photo_large_place
+      %table.large_photo
+        %tr
+          %td.prev-photo
+    
+            <
+    
+          %td.photo_place
+            .photo_artwork.artwork
+              .frame{:style => "display:inline-block;"}
+                .img{:style => "width:100%;float:none;"}
+                  =image_tag("",:style => "max-height:100%;", :class => "close_large big_img")
+
+              %h3
+                
+    
+          %td.next-photo
+
+            >
+  
+      
+    
+    
     :coffeescript
      
         
       $(document).on "click", '#large_place .close_large', ->
         $('#large_place').fadeOut()
+        
+        
 

app/views/portlets/render_public/_gallerycontent.html.haml

@@ -99,38 +99,31 @@
   
 
   -elsif input.style==2
-    </div>
-    
-    #slider
+    .gallery
+      
+      -input.gallery_images.each do |gallery_image|
+        
+        .photo{:style => "height:250px;"}
+          %a{:href => gallery_image.image_file.file.large.url, :"data-remote" => true}
+            .img
+              =image_tag(gallery_image.image_file.file.square.url, :alt => "#{gallery_image.title}")
   
-      <div id="wrapper" >
-      <div id="carousel" >
-      
-      -input.gallery_images.each do |gallery_images|
-        =image_tag gallery_images.image_file.file.large.medium.url
-      
-
-
-      </div>
-      </div>
-    <div class="row-fluid">
+            %h3{:style => "display:none;"}
+              =gallery_image.title
   
 
 
   -elsif input.style==1
-    .portlet.input
-      %table.gallery_images  
-        =raw "<tr>"
+    .gallery
       
-        - i = 0
-        -input.gallery_images.each do |gallery_images|
-          - i = i+1
+      -input.gallery_images.each do |gallery_image|
         
-          %td=link_to image_tag(gallery_images.image_file.file.large.medium.small.thumb.url, :alt => "#{gallery_images.title}"), gallery_images.image_file.file.large.url, :rel => "prettyPhoto"
+        .photo{:style => "height:250px;"}
+          %a{:href => gallery_image.image_file.file.large.url, :"data-remote" => true}
+            .img
+              =image_tag(gallery_image.image_file.file.large.medium.small.thumb.url, :alt => "#{gallery_image.title}")
+  
+            %h3{:style => "display:none;"}
+              =gallery_image.title
         
-          -if i % 4 == 0
-            =raw "</tr><tr>"
-        
-        
-        =raw "</tr>"
-    
+