使用Magnific Popup创建动作以使配置文件照片默认

Question

我可以使用帮助创建一个样式表来覆盖Magnific Popup中的默认样式表(https://github.com/joshuajansen/magnific-popup-rails).

我有代码供用户default_profile_id从他们上传的图片中选择.我遇到的问题是我需要能够让当前用户从他们的页面做出决定的代码.例如,当前用户将鼠标悬停在他们的照片上,并在其上显示"制作个人资料照片"文本(https://s18.postimg.cc/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)

Answer 1

您可以拥有两个图像并在鼠标悬停时交换图像，也可以使用 CSS 效果（例如 :hover 和不透明度）使图像按您喜欢的方式显示。

显示 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