Creazione di un'azione con Popup magnifico per rendere predefinito la foto del profilo

Question

È possibile utilizzare la guida per la creazione di un foglio di stile per sovrascrivere quelli predefiniti da Magnific Popup (https://github.com/joshuajansen/magnific-popup-rails).

Ho il codice per un utente per selezionare il loro default_profile_id dalle immagini caricate. Il problema che ho è che ho bisogno del codice che permetterà all'utente corrente di prendere quella decisione dalla sua pagina. Ad esempio, l'utente corrente passa sopra la sua foto e il testo "Crea foto del profilo" viene visualizzato su di esso (http://s18.postimg.org/arl81snll/mouse.jpg). Non so come creare un foglio di stile o modificare ciò che ho in modo che questa azione possa funzionare.

Qualsiasi aiuto con l'aggiunta di questa azione alle foto sarebbe molto apprezzato.

Foto 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 

foto Modello: Modello

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 

utente:

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

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

dell'utente del 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 

Le colonne per la foto tabella sono: id, created_at, updated_at, image, name, user_id

tabella utenti presenta le seguenti colonne correlate: id, default_photo_id (integer)

Answer 1

è possibile avere due immagini e di scambio immagini quando si verifica un passaggio del mouse o puoi usare effetti CSS come: hover e opacity per far apparire l'immagine come preferisci.

Esempio di CSS che mostra em, px e% per un'immagine di 190x190 pixel. Dimensionamento e posizione dovrebbero essere adeguati per soddisfare le vostre esigenze.

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

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

E un file plunker: http://plnkr.co/edit/44G96cTdYsfJh6NCQUjE?p=preview