Skip to main content

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' 

Labels:

Comments

Post a Comment

Popular posts from this blog

75 Surprisingly Creative Facebook Timeline Covers

Now that you have shifted to “Facebook Timeline” to display you profile in a better way, get creative with it. Facebook timeline gives you a chance to turn you profile exclusive and innovative. Putting up a personal picture as cover, will only make you look outdated. You can try some exciting covers to design your very own Facebook profile in distinguished style. We have scrounged through web to pick 75 amazing Facebook Timeline covers for this list. Unique cover pictures can give your timeline a different-from-the-rest look. You can create your own creative covers picking ideas from these cool pictures listed below. If you like this article, you might be interested in some of our other articles on  Facebook Scripts, Best Facebook Apps, Best Facebook Games, and Facebook Tips You Should Check . Ekkapong Techawongthaworn Be a brand ambassador and flaunt your fanaticism for gadgets and shopping on your cover. Ekkapong Techawongthaworn Gabriel Fort A snapshot of an App...
Post a Comment
Read more

23 Best jQuery Slideshow (Gallery)

JQuery is becoming almost every programmer’s favorite. It gives you freedom of displaying images galleries in most effective way and that too with very little coding. When slideshows have become an integral part of the websites, the importance of jQuery cannot be ignored. Its easy usability has given it’s an edge over Flash. Do you remember the days when we used to see images grouped in tables (tr / td) and once clicked they opened in a new window or pop up! Those days are gone. Now we can use awesome jQuery plugins to showcase images in far more interesting ways. Slideshows provides great user experience. Checking and viewing image galleries have covered a long way in terms of development. Thanks to jQuery. Today we have come up with a power pack of Slideshows provides great user experience. Checking and viewing image galleries have covered a long way in terms of development. Thanks to jQuery. Today we have come up with a power pack of  Best jQuery Slideshow Plugins , which you wo...
Post a Comment
Read more

30 Free Facebook Timeline Cover Backgrounds

If you really want a good cover for your Facebook Timeline, you have landed on the right page. It’s seen that people have faced problem in finding covers of their choice because of the specific size issue. However, you do not need to look further, as this list presents 30 cool free Facebook Timeline covers for you to sport them on your profile page. The list includes creative, funny, exciting and cool pictures of perfect dimensions to fit your Facebook cover without having you to crop or resize them. Moreover, they are absolutely free to download, so you can instantly put them on your Timeline cover to express numerous moods and inspirations. If you like this article, you might be interested in some of our other articles on  Thumbs Up Symbol,Heart Symbol On Facebook, Facebook Timeline Covers and Facebook Timeline As Used By Brands . Love Calculator What all it takes to result in love? A pretty woman and drinks. Love Calculator This Guy Rocks Let your cover boast abou...
Post a Comment
Read more