SUPPORT THE SITE WITH A CLICK

Subscribe Rss:

SUPPORT THE SITE WITH A CLICK

Tuesday, July 15, 2008

Image Slider Flickr using ruby on rails

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

Download this tutorial


!Thanks


Kind notice this application has been created & tested in rails 2.1.0

1 comment :