Magnific Popupでアクションを作成してプロフィール写真のデフォルトを作成する

Question

Magnificent Popup（https://github.com/joshuajansen/magnific-popup-rails）のデフォルトの設定を上書きするスタイルシートの作成にヘルプを使用できます。

アップロードした画像からdefault_profile_idを選択するためのコードがあります。私が持っている問題は、現在のユーザーが自分のページからその決定を下すことを可能にするコードが必要だということです。たとえば、現在のユーザーが写真の上を移動し、「Make Profile Photo」というテキストが表示されます（http://s18.postimg.org/arl81snll/mouse.jpg）。私はスタイルシートを作成する方法や私がしていることを変更する方法がわからないので、このアクションが動作することができます。

写真にこの措置を追加することについてのご支援をいただければ幸いです。

写真コントローラー：

def new 
    @photo = Photo.new 
    end 

    def create 
    @photo = Photo.new(params[:photo]) 
    @photo.user = current_user 
    if @photo.save 
     flash[:notice] = "Successfully created photos." 
     redirect_to :back 
    else 
     render :action => 'new' 
    end 
    end 

    def resize(width, height, gravity = 'Center') 
    manipulate! do |img| 
     img.combine_options do |cmd| 
     cmd.resize "#{width}" 
     if img[:width] < img[:height] 
      cmd.gravity gravity 
      cmd.background "rgba(255,255,255,0.0)" 
      cmd.extent "#{width}x#{height}" 
     end 
     end 
     img = yield(img) if block_given? 
     img 
    end 
    end 
    def edit 
    @photo = Photo.find(params[:id]) 
    end 

    def update 
    @photo = Photo.find(params[:id]) 
    if @photo.update_attributes(paramas[:photo]) 
     flash[:notice] = "Successfully updated photo." 
     redirect_to @photo.gallery 
    else 
     render :action => 'edit' 
    end 
    end 

    def destroy 
    @photo = Photo.find(params[:id]) 
    @photo.destroy 
    flash[:notice] = "Successfully destroyed photo." 
    redirect_to @photo.gallery 
    end 

    def choose_default_photo 
    @photo = Photo.find params[:photo_id] 
    current_user.default_photo = @photo 
    redirect_to '/profile' # or wherever I want to send them 
    end 
end 

写真モデル：

attr_accessible :title, :body, :gallery_id, :name, :image, :remote_image_url 
    belongs_to :gallery 
    has_many :gallery_users, :through => :gallery, :source => :user 
    belongs_to :user 
    mount_uploader :image, ImageUploader 

    LIMIT = 5 


    validate do |record| 
    record.validate_photo_quota 
    end 


    def validate_photo_quota 
    return unless self.user 
    if self.user.photos(:reload).count >= LIMIT 
     errors.add(:base, :exceeded_quota) 
    end 
    end 
end 

ユーザーモデル：

has_many :photos 
    belongs_to :default_photo, :class_name => "Photo" 
    after_create :setup_gallery 

    private 
    def setup_gallery 
    Gallery.create(user: self) 
    end 
end 

ユーザーコントローラー：

def new 
    @user = User.new 
    end 

    def show 
    @user = User.find(params[:id]) 
    end 

    def destroy 
    User.find(id_params).destroy 
    flash[:success] = "User deleted." 
    redirect_to users_url 
    end 

    def choose_default_photo 
     @photo = Photo.find params[:photo_id] 
     current_user.default_photo = @photo 
     redirect_to '/profile' 
    end 

写真テーブルの列は次のとおりです。 id、created_at、updated_at、image、name、user_id

Usersテーブルには、以下の関連の列があります。 id、default_photo_id (integer)

Answer 1

次の2つのイメージとスワップを持つことができるのいずれかマウスオーバーが発生したときの画像、またはホバーや不透明などのCSSエフェクトを使用して、好きなように画像を表示することができます。

190x190ピクセルイメージのem、px、％を示すサンプルCSS。サイジングとポジションは、ニーズに合わせて調整する必要があります。

/* resize so easier to view */ 
img.profImg { 
    width: 480px; 
    /* z-index: 1; */ 
} 
/* all hover items */ 
.overImg { 
    background: #111111; 
    color: white; 
    opacity: 0.6; 
    border-radius: 0.5em; 
    width: 190px; 
    height: 190px; 
    /* z-index: 2; */ 
} 
/* hover effects */ 
.carImg:hover .overImg { display:block; } 
.carImg .overImg { display:none; } 
/* specific to car image, will need to be adjusted */ 
.car-over-2 { 
    position: absolute; 
    top: 310px; 
    left: 25px; 
} 
.car-over { 
    position: absolute; 
    top: 36px; 
    left: 25px; 
} 
/* text near bottom of image */ 
.overText { 
    color: white; 
    font-size: 1.1em; 
    position: relative; 
    top: 85%; 
    left: 12.5%; 
    z-index: 3; 
} 
/* X button to close: should use an icon for this */ 
.closer { 
    background-color: white; 
    color: black; 
    font-size: 0.8em; 
    border-radius: 5em; 
    padding: 0.2em; 
    width: 2em; 
    height: 1em; 
    position: relative; 
    left: 85%; 
    top: -8px; 
} 

対応HTML：

<a class="carImg"> 
    <img src="http://s18.postimg.org/arl81snll/mouse.jpg" class="profImg"> 
    <span class="overImg car-over"> 
     <div class="msgFlash overText">Make Profile Photo</div> 
     <b class="icon icon-close closer">X</b> 
    </span> 
    </a> 

そしてplunkerファイル：http://plnkr.co/edit/44G96cTdYsfJh6NCQUjE?p=preview