Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
upload multiple images with captions (with more jQuery goodness, it's…
… still a glorious novelty to me right now.)
  • Loading branch information
blueminder committed Apr 24, 2011
1 parent 88a02c7 commit 7d78636
Show file tree
Hide file tree
Showing 12 changed files with 699 additions and 26 deletions.
4 changes: 2 additions & 2 deletions app/controllers/projects_controller.rb
Expand Up @@ -29,7 +29,7 @@ def show
# GET /projects/new.xml
def new
@project = Project.new
1.times { @project.project_images.build }
10.times { @project.project_images.build }

respond_to do |format|
format.html # new.html.erb
Expand All @@ -40,7 +40,7 @@ def new
# GET /projects/1/edit
def edit
@project = Project.find(params[:id])
1.times { @project.project_images.build }
10.times { @project.project_images.build }

return false unless require_project_owner(@project)

Expand Down
2 changes: 1 addition & 1 deletion app/models/project_image.rb
@@ -1,6 +1,6 @@
class ProjectImage < ActiveRecord::Base
belongs_to :project
has_attached_file :image, :styles => { :large => "120x120>", :medium => "48x48>", :thumb => "26x26>" }
has_attached_file :image, :styles => { :full => "640x480>", :large => "120x120>", :large_thumb => "100x100#" }
validates_attachment_presence :image
validates_attachment_size :image, :less_than => 5.megabytes
end
4 changes: 1 addition & 3 deletions app/views/layouts/application.html.erb
Expand Up @@ -7,9 +7,7 @@
<script src="/javascripts/event_calendar.js" type="text/javascript"></script>
<script src="/javascripts/jquery.jeditable.mini.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.5/tiny/jquery.tools.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" />
<script type="text/javascript" src="/javascripts/jquery.lightbox-0.5.js"></script>


<%= csrf_meta_tag %>
Expand Down
27 changes: 24 additions & 3 deletions app/views/projects/_form.html.erb
Expand Up @@ -35,15 +35,35 @@
<%= f.label :description %><br />
<%= f.text_area :description %>
</div>

Image Upload
<div class="newPaperclipFiles">
<% index = 0 %>
<%= f.fields_for :project_images do |project_image| %>
<% if project_image.object.new_record? %>
<%= project_image.file_field :image %>
<% if project_image.object.new_record? %>
<div class="upload_image" id="i<%= index %>">
<%= project_image.file_field :image %><br>
<%= project_image.text_field :caption %>
</div>
<% end %>
<% index = index + 1 %>
<% end %>
<% end %>
<a id="show_up">Add Another Image</a>
<script>
var index = 1;
$('#show_up').click(function() {
if (index<10) {
$('#i'+index).show('fast', function() {});
index = index + 1;
} else {
alert('Sorry, you can only upload 10 images at a time.');
}
});
</script>
</div>

<br clear="true">
Delete Old Images
<div class="existingPaperclipFiles">
<%= f.fields_for :project_images do |project_image| %>
<% unless project_image.object.new_record? %>
Expand All @@ -53,6 +73,7 @@
<%= link_to project_image.object.image.url, project_image.object.image.url %>
<% end %>
<%= project_image.check_box :_destroy %>
<br>
<% end %>
<% end %>
</div>
Expand Down
15 changes: 7 additions & 8 deletions app/views/projects/show.html.erb
Expand Up @@ -37,23 +37,21 @@

<div style="width: 900px;">


<% unless @project.project_images.empty? %>
<p>
<b>Project Images</b><br>
<h2>Project Images</h2>
<a class="prev browse left"></a>
<div class="scrollable">
<div class="items">
<% @project.project_images.each_with_index do |i,index| %>
<% if index%3==0 %>
<% if index>0 || index == @project.project_images.length-1 %>
</div>
<% end %>
<% if index != @project.project_images.length %>
<div>
<% end %>
<% end %>
<%= image_tag i.image.url(:large) %>
<% if index>0 && index == @project.project_images.length-1 %>
<% end %>
<%= link_to image_tag(i.image.url(:large_thumb)), i.image.url(:full) %>
<% if index>0 && index == @project.project_images.length-1 || (index+1)%3==0 %>
</div>
<% end %>
<% end %>
Expand All @@ -63,17 +61,18 @@
<a class="next browse right"></a>
</p>
<% end %>

<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {

// initialize scrollable
$(".scrollable").scrollable();
$('.items a').lightBox();

});
</script>


<br clear="all">
<h2>Project Blog</h2>
<% unless @project.project_updates.length <= 1 then %>
Expand Down
Binary file added public/images/h300.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/hori_large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/vert_large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7d78636

Please sign in to comment.