Flickr look like slideshows using rubyonrails
After seeing the prototype-ui.I started doing some of the examples to be working with rails application.Now i have tried with Carousel.
Carousel are great to display a large set of data like images.
here i have tried to create Image slide show flickr like (Prototype UI : Carousel) with ruby on rails application.
Download this tutorial
Step 1:Create a Scaffold name image
ruby script/generate scaffold image name:string
run the migration file
Step 2:Write upload action in Imagescontroller
For uploading you can use plugin or by writing ur upload functionality
def upload
@path =File.join("#{RAILS_ROOT}/public/images/",params[:image][:uploaded_data].original_filename)
File.open(@path, "wb"){|f| f.write(params[:image][:uploaded_data].read)}
@image=Image.new
@image.name=params[:image][:uploaded_data].original_filename
@image.save
render :action=>'new'
end
Step 3:Altering the view part
alter index.html.erb & new.html.erb
index.html.erb
<h1>Listing images</h1>
<table>
<tr>
<th>Name</th>
</tr>
<% for image in @images %>
<tr>
<td><%=h image.name %></td>
<td><%= image_tag image.name,:alt =>image.name,:size=>'320x244'%></td>
<td><%= link_to 'Show', image %></td>
<td><%= link_to 'Edit', edit_image_path(image) %></td>
<td><%= link_to 'Destroy', image, :confirm => 'Are you sure?', :method => :delete %></td>
</tr>
<% end %>
</table>
-------------------------
new.html.erb
<h1>New Image</h1>
<%= error_messages_for :image %>
<%= render:partial=>'form',:locals=>{:button=>'Upload'}%>
here i have used partials.
_form.html.erb
<% form_for(:image,:url=>{:action => 'upload' },:html => { :multipart => true }) do |f| %>
<p>
<%= f.file_field :uploaded_data, :class => 'input-file' %>
Upload a new image
</p>
<p>
<%= f.submit button %>
</p>
<% end %>
Step 4:upload photos
Now u just upload ur photos
Step 5:Create a new controller show
ruby script/generate controllershow
show controller is used to show the uploaded images in a list
i have made my show controller like this
class ShowController < ApplicationController
layout 'images'
def index
@show=Image.find(:all)
respond_to do |format|
format.html # index.html.erb
end
end
end
Step 6:View part under show/index.html.erb
index.html.erb under show
<div id="horizontal_carousel">
<div class="container" >
<ul>
<%= render :partial=> 'menu_li', :collection => @show %>
</ul>
</div>
<div class="previous_button"></div>
<div class="next_button"></div>
</div>
<div>
here i have used a partial form 'menu_li'
_menu_li.html.erb
<% image = menu_li %>
<li><a href="<%= link_to_menu(image)%>"><%= image_tag image.name,:alt =>image.name,:size=>'150x150'%></a></li>
Step 7:Writing function in Applicationhelper
in _menu_li.html.erb i have called helper function link_to_menu.i have written the function in applicationhelper.rb
application_helper.rb
module ApplicationHelper
def link_to_menu(image)
if not image.name.empty?
return image.name
end
end
end
Step 8.Applying stylesheets & javascript in layouts
You have to include in the stylesheets & javascript <head> tag of your layout
<%=javascript_include_tag :defaults%>
<%=javascript_include_tag 'carousel'%>
<%= stylesheet_link_tag 'scaffold' %>
<%=stylesheet_link_tag 'prototype-ui'%>
under deafults we will be getting prototype & effects.
Finally you can get the flickr type slideshow from your http://localhost:port/show
Thank you very much :)
ReplyDelete