Skip to:
Content
Pages
Categories
Search
Top
Bottom

Change Avatar on mouseover like Facebook

  • Profile photo of funmi omoba
    funmi omoba
    Participant

    @funmi-omoba

    hi, does anyone know the functions code that add Change Avatar on mouseover. have seen it on some buddypress site and i love the function.

    thanks

Viewing 24 replies - 1 through 24 (of 24 total)
  • Profile photo of funmi omoba
    funmi omoba
    Participant

    @funmi-omoba

    Anyone?

    Profile photo of Paul Gibbs
    Paul Gibbs
    Keymaster

    @djpaul

    We have no idea what site you might be referring to when you say “some buddypress site.” I think I know what you mean, which the answer is http://jetpack.me/, but that’s a total guess.

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    are you talking about facebook profile pages? how the “change picture” link shows onmouseover?

    Profile photo of funmi omoba
    funmi omoba
    Participant

    @funmi-omoba

    thanks for your reply, you can check : http://www.lovethistune.com its a buddypress site. and the function is cool. there is a link to change avatar on profile avatar on a mouseover.

    regards

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    it looks like they wrote the code themselves. If you know a little about jquery and bp codex you could just right a simple function to perform this.

    give me a link to your site, and i’ll try to right the function for you or you could tell me what the css width/height/margin/padding of your item-header-avatar.

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    @naijaping . Ok this is what i came up with based on your sites css.

    go to your theme’s /member-header.php

    find `

    `

    replace it with this
    `


    <a href="profile/change-avatar/”>Change Picture

    // change avatar
    $(document).ready(function(){
    $(“#item-header-avatar”).hover(function(){
    $(“span”, this).stop().animate({top:”130px”},{queue:false,duration:200});
    }, function() {
    $(“span”, this).stop().animate({top:”160px”},{queue:false,duration:200});
    });
    });

    `

    You could also remove the inline css and place this inside your css file :
    `#item-header-avatar {
    float: left;
    height: 150px;
    overflow: hidden;
    padding-right: 20px;
    width: 150px;
    }
    #item-header-avatar span {
    background: none repeat scroll 0 0 #FFFFFF;
    font-weight: bold;
    left: 0;
    padding: 4px 25px;
    position: relative;
    text-align: center;
    top: 150px;
    z-index: 10000;
    }`

    Profile photo of function_im_awesome() {
    function_im_awesome() {
    Participant

    @vegasparty607

    Looks good, but some of the avatar on the bottom is cut off, and there is a margin at the top of the avatar.

    How do i fix it?

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    this was meant for just one persons site, if you give me a link to your site i can adjust the css

    Profile photo of function_im_awesome() {
    function_im_awesome() {
    Participant

    @vegasparty607

    Sure: Link to a Profile

    Thanks!

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    @vegasparty607 change #item-header-avatar css `width:160px;height:180px`
    change span’s css `padding: 4px 30px; top:180`
    in the jquery change `130px` to `160px` and `150px` to `180px`

    that should do it, let me know

    Profile photo of function_im_awesome() {
    function_im_awesome() {
    Participant

    @vegasparty607

    Where is the “117px” in the jquery, and where is the “span’s css padding?”

    Profile photo of Prince Abiola Ogundipe
    Prince Abiola Ogundipe
    Participant

    @naijaping

    @Timothy Tarmon Jr, thanks for you effort, just tried this as instructed but seems to have no effect, what am i doing wrong, i just copied member-header.php to my child theme and replaced

    with the code provided above but no changes, what am i doing wrong.

    regards

    Profile photo of @mikey3d
    @mikey3d
    Participant

    @mikey3d

    @timothyjunior You have been mislead by @vegasparty607 that is not his site. It’s @gunju2221

    Profile photo of Virtuali
    Virtuali
    Participant

    @gunju2221

    Thanks MikeyD. Don’t quite understand why he spammed the topic with my site however.

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    Sorry @vegasparty607 but in order for this to look right I will need a link to “your site” . either way i meant for 117px to be 130px i edited my last update , review it.
    The span’s css is ` `

    @naijaping make sure you made the folders `wp-content/themes/(yourTheme)/members/single/member-header.php`
    and not `wp-content/themes/(yourTheme)/member-header.php`

    @mikey3d thanks for pointing that out, if that isn’t his site then he must be using the same theme, I have had alot of people wanting help but most don’t like to link to their sites. Kinda odd, since a link with help promote their site.

    Profile photo of Virtuali
    Virtuali
    Participant

    @gunju2221

    Well Timothy, I don’t want all of that work to go to waist! I’ll implement it on my site and see how it looks :)

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    @gunju2221 Ok, let me know if you want any mods or if it’s not working correctly. ( if its working at all, let me know, thanks)

    Profile photo of Profile Name
    Profile Name
    Member

    @cheese-1

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    So did it work correctly for anyone?

    Profile photo of Prince Abiola Ogundipe
    Prince Abiola Ogundipe
    Participant

    @naijaping

    @Timothy Tarmon Jr am still trying to see what am i doing wrong. its not working for me right now.

    regards

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    @naijaping where did you create the file member-header.php inside your theme

    @Timothy : i created it at wp-content/themes/(My Theme)/members/single/member-header.php. but funny enough, i cant see members-header.php in my theme file at the wordpress dashboard. i can only see it through my FTC.

    thanks

    Profile photo of Timothy Tarmon Jr
    Timothy Tarmon Jr
    Participant

    @timothyjunior

    @naijaping hey my mentions tag is this (@timothyjunior) I would have replied sooner but i really only look at my profile for mentions.

    I just checked my own theme for this , and as you said it doesn’t list any folders so I can’t locate mine within wordpress either.

    I edit my files threw cpanel. Did you edit your files like instructed?

    Profile photo of funmi omoba
    funmi omoba
    Participant

    @funmi-omoba

    Did anyone get this working?

Viewing 24 replies - 1 through 24 (of 24 total)
  • The topic ‘Change Avatar on mouseover like Facebook’ is closed to new replies.
Skip to toolbar