CSS 3, Design Inspiration, JavaScript, jquery

Basic jquery plugin developement / css3 round image


Note:

-----------------------------------------

1. Just a quick plugin development, to fix my work. You may extend it use it distribute it and what ever....................

Objective of the post

--------------------------------------

1. Basic Plugin development

2. implementing css3 round image style

-------------------------------------------------

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

// plugin start from here

// this hooks a new function to jquery [ $.fn.circle_me = function ]

/*

plugin name : circle_me

author : Jumper

email : neerooze@gmail.com

*/
$.fn.circle_me = function(options) {
console.log('Init circle me');

// default styles

var _style = {
             border: '1px solid #DDD',
             borderRadius: '50%',
             display: 'inline-block',
             height:"200px",
             width:"200px"
};
// over ridding the default style with users style
_style = $.extend( _style, options);

/*
Here   "  return "  is so important if you want to add changeable function.

eg:         $(".circle_now").circle_me().hide();

if you do not add return, here hide function will not work but still plugin will work  fine. If you do not want to add chain function you may ignore return function.

*/
return $(this).each(function(){
              $(this).css(_style);
              var _bg = $(this).attr('src');
              $(this).css({"backgroundImage":_bg});
        });

}

// plugin ends here
$(document).ready(function(){

     // initializing plugin basic

     $('.circle').circle_me();

    // initializing plugin with custom options

     $('.circle').circle_me( {  height: "300px", width: "400px", borderRadius:" 70%"});
});
</script>

// html part

<img class="circle"  src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/67563_10151525052674927_2120163905_n.jpg" />

DEMO
Cheers..
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s