javascript - 使用 Magnific Popup 创建操作以将个人资料照片设为默认

Question

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

我有代码供用户从他们上传的图片中选择他们的 default_profile_id。我遇到的问题是我需要允许当前用户从他们的页面做出决定的代码。例如，当前用户将鼠标悬停在他们的照片上，上面会出现“制作个人资料照片”文本 ( https://s18.postimg.cc/arl81snll/mouse.jpg )。我不知道如何创建样式表或修改我已有的内容才能使此操作生效。

如果您能帮助将此操作添加到照片，我们将不胜感激。

照片 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

照片模型:

  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

用户 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

照片表的列是: id, created_at, updated_at, image, name, user_id

用户表有以下相关列: id, default_photo_id(整数)

Answer 1

您可以拥有两个图像并在鼠标悬停时交换图像，或者您可以使用 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