Erstellen einer Aktion mit Magnific Popup zum Erstellen eines Standardprofils für Fotos

Question

Ich könnte Hilfe beim Erstellen eines Stylesheets verwenden, um die Standardwerte von Magnific Popup (https://github.com/joshuajansen/magnific-popup-rails) zu überschreiben.

Ich habe den Code für einen Benutzer, um ihre default_profile_id aus ihren hochgeladenen Bildern auszuwählen. Das Problem, das ich habe, ist, ich benötige Code, der dem aktuellen Benutzer erlauben wird, diese Entscheidung von ihrer Seite zu treffen. Zum Beispiel schwebt der aktuelle Benutzer über seinem Foto und der Text "Make Profile Photo" erscheint darauf (http://s18.postimg.org/arl81snll/mouse.jpg). Ich weiß nicht, wie ich ein Stylesheet erstellen oder ändern kann, damit diese Aktion funktioniert.

Jede Hilfe beim Hinzufügen dieser Aktion zu den Fotos wäre sehr willkommen.

Fotos Controller:

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 

Fotomodell:

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 

Benutzermodell:

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

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

Benutzer Controller:

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 

Die Spalten für die Fotos Tabelle sind: id, created_at, updated_at, image, name, user_id

Tabelle Benutzer hat die folgenden verwandten Spalten: id, default_photo_id (integer)

Answer 1

Sie entweder zwei Bilder und Swap haben Bilder, wenn ein Mouse-Over auftritt oder Sie können CSS-Effekte wie: Hover und Opacity verwenden, um das Bild so darzustellen, wie Sie es möchten.

Beispiel-CSS zeigt em, px und% für ein Bild mit 190x190 Pixel an. Größe und Position müssen an Ihre Bedürfnisse angepasst werden.

/* 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; 
} 

Entsprechende 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> 

Und eine Plunker Datei: http://plnkr.co/edit/44G96cTdYsfJh6NCQUjE?p=preview