Sunday, 29 July 2012

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
changepicture

   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
penciledit 
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' 

Ditulis Oleh : Unknown // 10:26
Kategori:

0 comments:

Post a Comment

 

Followers

Powered by Blogger.