javascript - transparente - Creando acción con una ventana emergente magnífica para hacer que la foto del perfil sea predeterminada

ventana modal javascript

Question

Podría utilizar la ayuda para crear una hoja de estilo para anular las predeterminadas de la ventana emergente Magnific ( https://github.com/joshuajansen/magnific-popup-rails ).

Tengo el código para que un usuario seleccione su default_profile_id de sus imágenes cargadas. El problema que tengo es que necesito un código que permita al usuario actual tomar esa decisión desde su página. Por ejemplo, el usuario actual se desplaza sobre su foto y el texto "Crear foto de perfil" aparece en ella ( https://s18.postimg.cc/arl81snll/mouse.jpg ). No sé cómo crear una hoja de estilo o modificar lo que tengo para que esta acción pueda funcionar.

Cualquier ayuda para agregar esta acción a las fotos sería muy apreciada.

Controlador de fotos:

 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

Modelo de fotografia:

 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

Modelo de usuario:

 has_many :photos
belongs_to :default_photo, :class_name => "Photo"
after_create :setup_gallery
private
def setup_gallery
Gallery.create(user: self)
end
end

Controlador de usuario:

 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

Las columnas para la tabla de fotos son: id , created_at , updated_at , image , name , user_id

La tabla de usuarios tiene las siguientes columnas relacionadas: id , default_photo_id (integer)

Answer 1

Puede tener dos imágenes e intercambiarlas cuando se pasa el mouse o puede usar efectos CSS como: desplazamiento y opacidad para que la imagen aparezca como desee.

CSS de muestra que muestra em, px y% para una imagen de 190x190 píxeles. El tamaño y la posición deberían ajustarse para adaptarse a sus necesidades.

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

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

Y un archivo plunker: http://plnkr.co/edit/44G96cTdYsfJh6NCQUjE?p=preview

Answer 2

para su código de backend

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

no funciona, tienes que usar current_user.update default_photo: @photo

y luego, en el extremo frontal, es más fácil usar Javascript, puede enviar una solicitud Ajax al servidor cuando el usuario ha hecho clic en la foto.
puede usar lo que css :hover para mostrar texto oculto, como responde @ user508994, a continuación se encuentra la parte principal

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