JQuery Plugin : edit Image FaceBook Style

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 = $('<div></div>').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:          $('<img/>').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></span').appendTo($secondlink)

  30:          .addClass('edit_profilepicture_icon')

  31:          .html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');

32:

  33:          //<span class="edit_profilepicture_icon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

  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;

Include this Pencil Image on your folder

Let me brief the API:

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

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

The availabe options are:

W3DOC