प्रोफ़ाइल फोटो बनाने के लिए मैग्नीफिश पॉपअप के साथ कार्रवाई करना डिफ़ॉल्ट

Question

मैग्निफिश पॉपअप (https://github.com/joshuajansen/magnific-popup-rails) से डिफ़ॉल्ट लोगों को ओवरराइड करने के लिए स्टाइल शीट बनाने में सहायता का उपयोग कर सकता हूं।

मेरे पास उपयोगकर्ता के लिए उनके अपलोड किए गए चित्रों से default_profile_id चुनने का कोड है। मेरी समस्या यह है कि मुझे कोड की आवश्यकता है जो वर्तमान उपयोगकर्ता को उनके पृष्ठ से यह निर्णय लेने की अनुमति देगा। उदाहरण के लिए वर्तमान उपयोगकर्ता अपनी तस्वीर पर होवर करता है, और टेक्स्ट "मेक प्रोफाइल फोटो" पर दिखाई देता है (http://s18.postimg.org/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' 
    end 

तस्वीरें तालिका के लिए स्तंभ हैं: id, created_at, updated_at, image, name, user_id

उपयोगकर्ता टेबल है निम्न संबंधित कॉलम: id, default_photo_id (integer)

Answer 1

आप या तो दो छवियों और स्वैप कर सकते हैं छवियां जब माउस-ओवर होता है या आप सीएसएस प्रभावों का उपयोग कर सकते हैं जैसे: होवर और अस्पष्टता, जैसा कि आप चाहें छवि को प्रकट करने के लिए।

नमूना सीएसएस दिखा उन्हें, px, और एक 190x190 पिक्सेल छवि के लिए%। आकार और स्थिति को आपकी आवश्यकताओं को सुइट करने के लिए समायोजित करने की आवश्यकता होगी।

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