Javascript 创建带有放大弹出窗口的操作，使个人资料照片成为默认设置

我可以使用帮助创建样式表来覆盖放大弹出（）中的默认样式表

我有代码供用户从上传的图像中选择他们的

默认\u profile\u id

。我的问题是我需要的代码将允许当前用户从他们的页面作出决定。例如，当前用户将鼠标悬停在其照片上，并在其上显示文本“Make Profile photo”（）。我不知道如何创建样式表或修改现有的样式表，以便此操作能够正常工作

如果您能在照片中添加此操作，我们将不胜感激

照片控制器：

 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

  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

用户模型：

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

  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

，

在

创建，

在

更新，

图像

，

名称

，

用户id

“用户”表具有以下相关列：

---

id

，

default\u photo\u id（整数）

鼠标悬停时，您可以有两个图像并交换图像，也可以使用CSS效果，例如：悬停和不透明度，使图像按您的喜好显示

示例CSS显示190x190像素图像的em、px和%。尺寸和位置需要根据您的需要进行调整

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

用于您的后端代码

 def choose_default_photo
   @photo = Photo.find params[:photo_id]
   current_user.default_photo = @photo
   redirect_to '/profile'
 end

不起作用，您必须使用当前用户。更新默认照片：@photo

在前端，更容易使用Javascript，当用户单击照片时，您可以向服务器发送Ajax请求
您可以使用css

：hover

来显示隐藏文本，如@user508994的答案，以下是主要部分

.carImg:hover .overImg  { display:block; }
.carImg .overImg { display:none; }

---

你试过什么？您的标记看起来像什么？您试图设置元素样式的当前样式是什么？你是否只需要CSS的帮助，或者当有人点击一张图片使其成为他们的个人资料照片时，你是否也需要CSS的帮助？我需要CSS的帮助，因为我没有CSS方面的经验。我以前没有使用过它，但我需要在整个应用程序中实现它。看到CSS中完成的一小部分应该可以帮助我自己完成其余的部分。我只需要了解如何编写CSS，然后将操作添加到CSS中。好的，那么现在的标记是什么样子的，显示是什么样子的？页面上有图像显示吗？有圆角吗？我不知道弹出窗口能给你带来多少放大效果，所以我不知道你需要多少才能到达你想去的地方。我还没有自定义任何一个。我只加了灯箱。我不需要圆角，如上传的例子所示。当鼠标悬停在上面时，我刚刚指出如何在照片上添加文本“makeprofile Image”。我只需要帮助将其添加到样式表中，以便使默认照片生效。我使用了gem，所以文件都在管道中。要进行任何修改，我必须创建一个新的样式表。我没有CSS方面的经验，所以我不确定。这里还有一些修改CSS以获得放大弹出窗口的好例子：