Создание действия с помощью Magnific Popup для создания профиля фото по умолчанию

Я мог бы использовать помощь при создании таблицы стилей, чтобы переопределить значения по умолчанию из Magnific Popup (https://github.com/joshuajansen/magnific-popup-rails).

У меня есть код для пользователя, чтобы выбрать их default_profile_id из их загруженных изображений. У меня проблема - мне нужен код, который позволит текущему пользователю принять это решение со своей страницы. Например, текущий пользователь нависает над своей фотографией, и на нем появляется текст "Сделать фото профиля" (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

Таблица пользователей имеет следующие связанные столбцы: id, default_photo_id (integer)

Ответы

Ответ 1

Вы можете либо иметь два изображения, либо обмениваться изображениями при наведении мыши или использовать эффекты CSS, такие как: наведение и непрозрачность, чтобы изображение выглядело как вам нравится.

Пример CSS, показывающий em, px и% для изображения с разрешением 190x190 пикселей. Размеры и положение необходимо отрегулировать, чтобы удовлетворить ваши потребности.

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