Pages

Tuesday, February 15, 2011

jQuery Plugin - article image

<script>
/**
 * An Article Image
 *
 * @author   : irfanudin ridho
 * @email    : irfan.ub@gmail.com
 * @version  : 2.0
 * @date    : February 15, 2011
 *
 * The structure of the html content should like this:
 * <div id="some_id">
 *  <img src="some_path"/>
 *  <h1>Title</h1>
 *  <p>Some Text Placed Here</p>
 * </div>
 */

(function($){

    $.fn.articleImage = function(){

        $(this).find('img').attr('align','left');
        $(this).find('h3,p').addClass('jq-all-box')
        $(this).addClass('jq-all-box');
        $(this).addClass('jq-page');
        $(this).find('img').addClass('jq-img');
        $(this).find('h3').addClass('jq-h3');
        $(this).find('p').addClass('jq-p');
 
        return this;
   };
})(jQuery);

</script>


<style>

.jq-img { width: 100px; margin: 0 10 10 0px;
          -moz-border-radius: 4px; border: 0px solid #aaa; }  
.jq-all-box { margin: 0px; }
.jq-page { width: 300px; overflow: auto; border: 1px solid #aaa;
           padding: 10px; -moz-border-radius: 4px; 
           -moz-box-shadow: 0 0 2px #aaa; font-family: sans-serif; }
.jq-h3 { font-size: 16px; color: #222; margin: 0 0 5px; }
.jq-p { font-size: 12px; color: #444; }

</style>

No comments:

Post a Comment