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