Gallery initiated

app/assets/stylesheets/splash.css.scss

@@ -144,3 +144,14 @@ a:after {
     font-weight: 400;
   }
 }
+#gallery{
+  .modal-body{
+    min-height: 500px;
+    i{
+      margin-top: 35%;
+    }
+  }
+  #carousel-example-generic{
+    visibility: hidden;
+  }
+}

app/controllers/conference_controller.rb

@@ -3,4 +3,9 @@ class ConferenceController < ApplicationController
     @conference = Conference.find_by_short_title(params[:id])
     not_found unless @conference.make_conference_public?
   end
+
+  def fetch_gallery_photos
+    @photos = Conference.find(params[:id].to_i).photos
+    render 'photos', formats: [:js]
+  end
 end

app/views/conference/_gallery.html.haml

@@ -0,0 +1,22 @@
+<!-- Modal -->
+%div{ class: "modal fade", id: "gallery", tabindex: "-1", role: "dialog", "aria-labelledby" => "myModalLabel", "aria-hidden"=> "true" }
+  %div{ class: "modal-dialog" }
+    %div{ class: "modal-content" }
+      %div{ class: "modal-body" }
+        %div{ id: "carousel-example-generic", class: "carousel slide", "data-ride" => "carousel" }
+          <!-- Wrapper for slides -->
+          %div{ class: "carousel-inner" }
+
+          <!-- Controls -->
+          %a{ class: "left carousel-control", href: "#carousel-example-generic", role: "button", "data-slide" => "prev" }
+            %span{ class: "glyphicon glyphicon-chevron-left" }
+          %a{ class: "right carousel-control", href: "#carousel-example-generic", role: "button", "data-slide" => "next" }
+            %span{ class: "glyphicon glyphicon-chevron-right" }
+
+
+:javascript
+  $('#gallery-btn').click(function(){
+    $('#gallery .modal-body').append('<i class="fa fa-spinner fa-spin fa-4x"></i>');
+  });
+
+

app/views/conference/_gallery_photo.html.haml

@@ -0,0 +1,3 @@
+- photos.each_with_index do |photo,index|
+  %div.item{ class: (index==0? 'active' : '') }
+    = image_tag(photo.picture)

app/views/conference/photos.js.haml

@@ -0,0 +1,3 @@
+$('#gallery .carousel-inner').append("#{escape_javascript(render('gallery_photo', photos: @photos)) }");
+$('#gallery .modal-body').children('.fa').remove();
+$('#gallery #carousel-example-generic').css('visibility','visible');

app/views/conference/show.html.haml

@@ -17,7 +17,8 @@
             .row-fluid
               .col-md-12.lead
                 %p= @conference.description
-
+          = link_to 'Gallery', fetch_gallery_photos_conference_path(@conference.id), class: 'btn btn-primary btn-lg', id: 'gallery-btn', data: {toggle: 'modal', target: '#gallery' }, remote: true
+          = render 'gallery'
   - if @conference.include_program_in_splash?
     %section{ id: 'program' }
       .pad

config/routes.rb

@@ -92,6 +92,7 @@ Osem::Application.routes.draw do
       get "/register" => "conference_registration#register"
       patch "/register" => "conference_registration#update"
       delete "/register" => "conference_registration#unregister"
+      get 'fetch_gallery_photos'
     end
   end