Commit 70a63732

mo khan <mo@mokhan.ca>
2013-06-24 23:34:18
display cake in carousel if there is more than one photo
1 parent b73c881
Changed files (1)
app
views
creations
app/views/creations/show.html.erb
@@ -2,25 +2,47 @@
 <% provide(:description, "#{@creation.story}") -%>
 <% content_for :javascript do %>
   <script type="text/javascript">
-    $(function() { Creations.Show.initialize(); });
-  </script>
+$(function() { 
+  Creations.Show.initialize(); 
+});
+$(document).ready(function($) {
+
+  $('#myCarousel').carousel({
+    interval: 5000
+  });
+  $('#carousel-text').html($('#slide-content-0').html());
+  //Handles the carousel thumbnails
+  $('[id^=carousel-selector-]').click( function(){
+    var id_selector = $(this).attr("id");
+    var id = id_selector.substr(id_selector.length -1);
+    var id = parseInt(id);
+    $('#myCarousel').carousel(id);
+  });
+  // When the carousel slides, auto update the text
+  $('#myCarousel').on('slid', function (e) {
+    var id = $('.item.active').data('slide-number');
+    $('#carousel-text').html($('#slide-content-'+id).html());
+  });
+});
+</script>
 <% end -%>
 <% if @creation.user == current_user %>
   <div class="row">
-    <div class="span12">
-      <% if @creation.user == current_user %>
-        <p>
-        <%= link_to '<i class="icon-edit"></i> <strong>EDIT</strong>'.html_safe, edit_creation_path(@creation), :class => 'btn' %> 
-        <a class="btn" href="<%= url_for new_creation_photo_path(@creation) %>"><i class="icon-plus"></i><strong>ADD IMAGES</strong></a>
-        <a class="btn" href="<%= url_for creation_favorites_path(:creation_id => @creation.id) %>"><i class="icon-heart"></i> <strong>FANCLUB (<%=  pluralize(@creation.favorites.length, 'fan') %>)</strong></a>
-        <%= link_to '<i class="icon-white icon-remove"></i> <strong>DELETE</strong>'.html_safe, creation_path(@creation),:confirm => "Are you sure you want to permanently remove this creation?", :method => :delete, :class => 'btn btn-danger pull-right' %>
-        </p>
-      <% end %>
-    </div>
+  <div class="span12">
+    <% if @creation.user == current_user %>
+      <p>
+    <%= link_to '<i class="icon-edit"></i> <strong>EDIT</strong>'.html_safe, edit_creation_path(@creation), :class => 'btn' %> 
+    <a class="btn" href="<%= url_for new_creation_photo_path(@creation) %>"><i class="icon-plus"></i><strong>ADD IMAGES</strong></a>
+    <a class="btn" href="<%= url_for creation_favorites_path(:creation_id => @creation.id) %>"><i class="icon-heart"></i> <strong>FANCLUB (<%=  pluralize(@creation.favorites.length, 'fan') %>)</strong></a>
+    <%= link_to '<i class="icon-white icon-remove"></i> <strong>DELETE</strong>'.html_safe, creation_path(@creation),:confirm => "Are you sure you want to permanently remove this creation?", :method => :delete, :class => 'btn btn-danger pull-right' %>
+    </p>
+  <% end %>
   </div>
+</div>
 <% else %>
 <% end %>
 
+<% if @creation.photos.size == 1 %>
 <div class="row">
   <div class="span6">
     <img class="thumbnail" src="<%= @primary_photo.image.large.url %>" alt="<%= @creation.name %>" />
@@ -31,19 +53,19 @@
     <hr />
     <% if @creation.tags.any? %>
       <span> <i class="icon-tags"></i> </span>
-      <% @creation.tags.each do |tag| -%>
-        <a href="<%= url_for creation_tag_path(tag.name) %>"><span class="label"><%= tag.name %></span></a>
-      <% end -%>
-    <% end -%>
+    <% @creation.tags.each do |tag| -%>
+      <a href="<%= url_for creation_tag_path(tag.name) %>"><span class="label"><%= tag.name %></span></a>
+  <% end -%>
+  <% end -%>
     <div class="row">
       <div class="span3">
         <% if user_signed_in? %>
           <% unless current_user == @creation.user || current_user.already_likes(@creation) %>
-            <%= button_to "ADD TO FAVORITES", creation_favorites_path(:creation_id => @creation.id), :method => :post, :class => 'btn btn-primary' %>
-          <% end %>
-        <% else %>
+          <%= button_to "ADD TO FAVORITES", creation_favorites_path(:creation_id => @creation.id), :method => :post, :class => 'btn btn-primary' %>
+      <% end %>
+      <% else %>
           <p><%= link_to "SIGN UP FOR FREE", new_user_session_path, :class => "btn btn-primary" %></p>
-        <% end %>
+      <% end %>
       </div>
       <div class="span3">
         <div class="row">
@@ -59,73 +81,157 @@
     <p><%= @creation.story %></p>
   </div>
 </div>
-<% if @creation.photos.size > 1 %>
-<div class="row">
-  <div class="span12">
-    <ul class="thumbnails">
-    <% @creation.photos.each do |photo| %>
-      <li class="span2">
-        <a class="thumbnail gallery" href="<%= photo.image.large.url %>"><img src="<%= photo.image.thumb.url.to_s %>" alt="<%= @creation.name %>" /></a>
-      </li>
-    <% end %>
-    </ul>
+
+<% else %>
+<!-- Main Area -->
+  <!-- Slider -->
+  <div class="row">
+    <div class="span12" id="slider">
+      <!-- Top part of the slider -->
+      <div class="row">
+        <div class="span6" id="carousel-bounding-box">
+          <div id="myCarousel" class="carousel slide">
+            <!-- Carousel items -->
+            <div class="carousel-inner">
+              <% @creation.photos.each_with_index do |photo, index| %>
+                <div class="<%= index == 0 ? "active" : "" %> item" data-slide-number="<%= index %>"><img src="<%= photo.image.large.url.to_s %>" alt="<%= @creation.name %>" /></div>
+              <% end %>
+            </div>
+            <!-- Carousel nav -->
+            <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
+            <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
+          </div>
+        </div>
+        <div class="span6" id="carousel-text"></div>
+
+        <div style="display: none;" id="slide-content">
+          <% @creation.photos.each_with_index do |photo, index| %>
+            <div id="slide-content-<%= index %>">
+
+
+    <h1><%= link_to @creation.name, creation_path(@creation) %></h1>
+    <p>By <%= link_to @creation.user.name, profile_path(@creation.user) %></p>
+    <hr />
+    <% if @creation.tags.any? %>
+      <span> <i class="icon-tags"></i> </span>
+    <% @creation.tags.each do |tag| -%>
+      <a href="<%= url_for creation_tag_path(tag.name) %>"><span class="label"><%= tag.name %></span></a>
+  <% end -%>
+  <% end -%>
+    <div class="row">
+      <div class="span3">
+        <% if user_signed_in? %>
+          <% unless current_user == @creation.user || current_user.already_likes(@creation) %>
+          <%= button_to "ADD TO FAVORITES", creation_favorites_path(:creation_id => @creation.id), :method => :post, :class => 'btn btn-primary' %>
+      <% end %>
+      <% else %>
+          <p><%= link_to "SIGN UP FOR FREE", new_user_session_path, :class => "btn btn-primary" %></p>
+      <% end %>
+      </div>
+      <div class="span3">
+        <div class="row">
+          <div class="span1">
+            <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
+            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+          </div>
+          <div class="span1"><div class="fb-like" data-href="<%= "#{request.protocol}#{request.host_with_port}#{request.fullpath}" %>" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div></div>
+          <div class="span1"><a href="//pinterest.com/pin/create/button/?url=<%= "#{request.protocol}#{request.host_with_port}#{request.fullpath}" %>&media=<%= yield :product_image %>&description=<%= yield :product_social %>." data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png"/></a></div>
+        </div>
+      </div>
+    </div>
+    <p><%= @creation.story %></p>
+
+
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div> <!--/Slider-->
+  <div class="row hidden-phone" id="slider-thumbs">
+    <div class="span12">
+      <ul class="thumbnails">
+        <% @creation.photos.each_with_index do |photo, index| %>
+          <li class="span2">
+          <a class="thumbnail" id="carousel-selector-<%= index %>">
+            <img src="<%= photo.image.thumb.url.to_s %>" alt="<%= @creation.name %>" />
+          </a>
+          </li>
+        <% end %>
+      </ul>
+    </div>
   </div>
 </div>
+
+
 <% end %>
+
+
+
+
+
+
 <div class="row">
   <a href="#" id="comments"></a>
   <div class="span12">
     <h3>Comments <small><%= pluralize @creation.comment_threads.length, "comment" %></small></h3>
     <% unless user_signed_in? %>
       <p><%= link_to "SIGN IN", new_user_session_path, :class => "btn btn-primary" %> to comment </p>
-    <% else %>
+  <% else %>
       <p><a id="add-comment-button" class="btn btn-large btn-primary" data-toggle="modal" href="#add-comment-dialog"><i class="icon-comment"> </i>COMMENT</a></p>
-    <% end -%>
+  <% end -%>
     <% @creation.comment_threads.each do |comment| %>
       <div class="row">
-        <div class="span8">
-          <div class="row">
-            <div class="span8">
-              <h4><strong><a href="<%= url_for profile_path(comment.user) %>"><%= comment.user.name %> </a>said...</strong></h4>
-            </div>
+      <div class="span6">
+        <div class="row">
+          <div class="span6">
+            <h4><strong><a href="<%= url_for profile_path(comment.user) %>"><%= comment.user.name %> </a>said...</strong></h4>
           </div>
-          <div class="row">
-            <div class="span2">
-              <a href="<%= url_for profile_path(comment.user) %>" class="thumbnail"><%= avatar_for(comment.user, {:size => 260 }) %></a>
-            </div>
-            <div class="span6">
-              <p> <%= comment.body %> </p>
-            </div>
+        </div>
+        <div class="row">
+          <div class="span2">
+            <a href="<%= url_for profile_path(comment.user) %>" class="thumbnail"><%= avatar_for(comment.user, {:size => 260 }) %></a>
           </div>
-          <div class="row">
-            <div class="span8">
-              <p></p>
-              <p>
-              <i class="icon-user"></i> By <%= link_to comment.user.name, profile_path(comment.user) %>
-              | <i class="icon-calendar"></i> <%= comment.created_at.to_s :foomat %> 
-              </p>
-            </div>
+          <div class="span6">
+            <p> <%= comment.body %> </p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="span6">
+            <p></p>
+            <p>
+            <i class="icon-user"></i> By <%= link_to comment.user.name, profile_path(comment.user) %>
+          | <i class="icon-calendar"></i> <%= comment.created_at.to_s :foomat %> 
+          </p>
           </div>
         </div>
       </div>
-      <hr>
-    <% end -%>
+    </div>
+    <hr>
+  <% end -%>
   </div>
 </div>
-  <div id="add-comment-dialog" class="modal hide fade">
-    <%= form_tag(creation_comments_path(@creation), :method => "post", :html => { :class => "form-horizontal"}) do |f| %>
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal">x</button>
-        <h3>Add Comment</h3>
-      </div>
-      <div class="modal-body">
-        <%= fields_for Comment.new do |f| %>
-          <%= f.text_area :body, :class => "span5" %>
-        <% end %>
-      </div>
-      <div class="modal-footer">
-        <input type="submit" class="btn btn-primary" value="Add Comment" />
-        <a href="#" class="btn" data-dismiss="modal">Close</a>
-      </div>
-    <% end %>
+<div id="add-comment-dialog" class="modal hide fade">
+  <%= form_tag(creation_comments_path(@creation), :method => "post", :html => { :class => "form-horizontal"}) do |f| %>
+    <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal">x</button>
+    <h3>Add Comment</h3>
   </div>
+  <div class="modal-body">
+    <%= fields_for Comment.new do |f| %>
+      <%= f.text_area :body, :class => "span5" %>
+  <% end %>
+  </div>
+  <div class="modal-footer">
+    <input type="submit" class="btn btn-primary" value="Add Comment" />
+    <a href="#" class="btn" data-dismiss="modal">Close</a>
+  </div>
+<% end %>
+</div>
+
+
+
+
+
+
+