2009-12-16 8 views
1

J'ai réussi à implémenter jcrop et trombone pour recadrer des images en allant sur une autre page (ie crop.html.erb). Mais je veux être en mesure de faire tout le recadrage sur ma page actuelle où je télécharge l'image (s) dans un div/dialogue popup. Donc, d'une manière ou d'une autre, j'ai besoin de charger la page crop.html.erb dans un popup div on click. Voici le code sur la page des culturesrails jcrop + trombone

<% content_for :javascript do %> 
    <%= stylesheet_link_tag "jquery.Jcrop" %> 
    <%= javascript_include_tag "jquery.Jcrop.min" %> 

<% end %> 

<script type="text/javascript" charset="utf-8"> 

$(function() { 
    $('#cropbox').Jcrop({ 
    onChange: update_crop, 
    onSelect: update_crop 
    }); 
}); 


function update_crop(coords) { 
    var rx = 100/coords.w; 
    var ry = 100/coords.h; 
    $('#preview').css({ 
    width: Math.round(rx * <%= @photo.photo_geometry(:biggest).width %>) + 'px', 
    height: Math.round(ry * <%= @photo.photo_geometry(:biggest).height %>) + 'px', 
    marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
    marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    }); 
    var ratio = <%= @photo.photo_geometry(:original).width %>/<%= @photo.photo_geometry(:biggest).width %>; 
    $("#crop_x").val(Math.round(coords.x * ratio)); 
    $("#crop_y").val(Math.round(coords.y * ratio)); 
    $("#crop_w").val(Math.round(coords.w * ratio)); 
    $("#crop_h").val(Math.round(coords.h * ratio)); 
} 

</script> 


<%= image_tag @photo.photo.url(:biggest), :id => "cropbox" %> 

<h4>Preview:</h4> 
    <div style="width:100px; height:100px; overflow:hidden"> 
     <%= image_tag @photo.photo.url(:biggest), :id => "preview" %> 
    </div> 


<% form_for @photo do |f| %> 
    <% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %> 
    <%= f.hidden_field attribute, :id => attribute %> 
    <% end %> 
    <p><%= f.submit "Crop" %></p> 
<% end %> 

Puis-je l'ajouter à un div ou quelque chose comme ça, ou suis-je loin? En passant, je ne suis pas simplement en train de télécharger une image à la fois, donc je ne peux pas l'avoir à une page de recadrage puis revenir. Je télécharge tous les fichiers à la fois en utilisant uploadify dans un div pop sur la page, puis je veux être en mesure de cliquer sur crop crop à côté d'une image.

+0

1. Étiquette Ruby supprimée, car elle est entièrement Rails. 2. Utilisez des majuscules au début des phrases. 3. Utilisez l'espace double pour faire un saut de ligne 4. N'utilisez pas de signatures dans les messages. Voir: http://stackoverflow.com/faq et http://stackoverflow.com/editing-help – Nakilon

Répondre

1

Vous devez apporter des modifications similaires à ceci:

dans photos_controller.rb

def create 
    @photo = Photo.new(params[:photo]) 
    if @photo.save 
    flash[:notice] = "Successfully created photo." 
    redirect_to @photo 
    end 
end 

def update 
    @photo = Photo.find(params[:id]) 
    if @photo.update_attributes(params[:photo]) 
     flash[:notice] = "Successfully updated photo." 
     redirect_to @photo 
    end 
end 

def crop 
    @photo = Photo.find(params[:id]) 
end 

dans routes.rb

map.resources :photos, :member => {:crop => :get} 

en photos/show.html.erb

<%= link_to "Crop", crop_photo_path(@photo) %> 
Questions connexes