Edit Image FaceBook Style

joomla template, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, jQuery, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart

After reading for 1 day about this, I've just finished making my first jquery plugin. it’s not so hard after all.
this will add a link when hover on image. like if you hover on your profile image on facebook. This Plugin meanwhile works on Div Only

 1: $.fn.editFaceBook = function(options) {

 2:      var opts = jQuery.extend({}, jQuery.fn.editFaceBook.defaults, options);

 3:      return this.each(function() {

 4:          //here is the div/image as 1 element

 5:          $currentdivorimage = jQuery(this);

 6:          $currentdivorimage.width(opts.width);

 7:          $currentdivorimage.css('position', 'relative');

 8:          $divouter = $('').appendTo($currentdivorimage);

 9:          $divouter.bind('mouseout', opts.hideedit);

 10:          $divouter.bind('mouseover', opts.showedit);

 11:          var $link = $('<a></a>').appendTo($divouter)

 12:          .attr('href', opts.linkurl);

 13:          $('').addClass('profileimage')

 14:          .width(opts.width)

 15:          .height(opts.height)

 16:          .attr('src', opts.imgurl)

 17:          .appendTo($link);

 18:   

 19:          var $secondlink = $('<a class="edit_profilepicture hidden" title="Change Picture" href="#">Change Picture</a>')

 20:          .insertAfter($link)

 21:          .bind('mouseover', opts.showeditpencil)

 22:          .bind('mouseout', opts.hideeditpencil)

 23:          .attr('href', opts.linkediturl)

 24:          .bind('click', opts.editlinkclick)

 25:          ;

 26:         

 27:          

 28:   

 29:          $('</span').appendTo($secondlink)

 30:          .addClass('edit_profilepicture_icon')

 31:          .html('      ');

 32:          

 33:          //      

 34:      });

 35:  };

 36:   

 37:  jQuery.fn.editFaceBook.defaults = {

 38:      linkurl: 'www.dummy.com',

 39:      linkediturl : '/edit.aspx',

 40:      width: 250,

 41:      height: 327,

 42:      imgurl: 'images/upload/noAvatarPicL.jpg',

 43:      editlinkclick:function(){

 44:      },

 45:      showedit: function() {

 46:          $currentelement = jQuery(this);

 47:          $currentelement.find('.edit_profilepicture').removeClass('hidden');

 48:      },

 49:      hideedit: function() {

 50:          $currentelement = jQuery(this);

 51:          $currentelement.find('.edit_profilepicture').addClass('hidden');

 52:      },

 53:      showeditpencil: function() {

 54:      $currentelement = jQuery(this);

 55:          $currentelement.find('.edit_profilepicture_icon').css('background-position', 'right bottom').css('border', '0px')

 56:          },

 57:      hideeditpencil: function() {

 58:          $currentelement = jQuery(this);

 59:          $currentelement.find('.edit_profilepicture_icon').css('background-position', 'right top');

 60:      }

 61:  };

Include this CSS on your Page


.edit_profilepicture {

background:#FFFFFF none repeat scroll 0 0;

height:20px;

padding:5px 27px 0 6px;

position:absolute;

right:0;

top:0px;

}

.edit_profilepicture_icon {

background:transparent url(../images/penciledit.gif) no-repeat scroll right top;

height:18px;

position:relative;

position:absolute !important;

width:18px;

right:4px;

top:4px;

margin-top:0px;

text-decoration:none;

}

.whitepencil

{

 background-position:right bottom;

}

.hidden

{

 display:none; 

}

Let me brief the API:

$(‘selectors’).editFaceBook(option);

The option usage is {prop:value,prop:value,n:n}

The availabe options are:

linkurl 'the link of our image click url
linkediturl 'url for our changemypicture click'
width 'width of our image'
height ''height of our image'
imgurl "imageurl"
editlinkclick "function of when changemypicture clicked'
showedit 'function of displaying edit section'
hideedit 'function of hiding edit section’
showeditpencil 'function of showing white pencil'
hideeditpencil 'function of hiding white pencil'

If you cant Download or have any Suggestions please Contact us

Newer news items:

Older news items:

<< Previous pageNext page >>

Recommended Web Hosting For Bloggers and Designers

I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.