使用强大的弹出窗口创建动作以将个人资料照片设为默认设置
使用强大的弹出窗口创建动作以将个人资料照片设为默认设置
提问于 2013-11-01 01:35:05
我可以使用帮助来创建样式表，以覆盖Magnific (https://github.com/joshuajansen/magnific-popup-rails)中的默认样式表。
我有一个用户的代码来选择他们的default_profile_id从他们上传的图像。我的问题是，我需要允许当前用户从他们的页面做出该决定的代码。例如，当前用户将鼠标悬停在他们的照片上，文本"Make Profile photo“就会出现在照片上(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'
endphotos表的列包括：id、created_at、updated_at、image、name、user_id
Users表具有以下相关列：id、default_photo_id (integer)
回答 2
Stack Overflow用户
发布于 2013-11-07 04:54:22
您可以拥有两个图像并在鼠标悬停时交换图像，也可以使用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>Stack Overflow用户
发布于 2018-07-22 01:27:52
您的后端代码
def choose_default_photo
@photo = Photo.find params[:photo_id]
current_user.default_photo = @photo
redirect_to '/profile'
end不起作用，您必须使用current_user.update default_photo: @photo
而在前端，使用Javascript会更容易，当用户点击照片时，你可以向服务器发送Ajax请求
你可以使用什么css :hover来显示隐藏的文本，正如@user508994的回答，下面是主要部分
.carImg:hover .overImg { display:block; }
.carImg .overImg { display:none; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19713139
复制相关文章
相似问题