jquery thumbnail class

jquery.thumb.js

(function () {
  var thumbs = {};

  Thumb = function(cfgObj){
    if(typeof(cfgObj) !== "object") throw("config object missing!")
    if(cfgObj.parentElement!= null){
      this.parentElement = cfgObj.parentElement
    }else{
      throw("no parent element!");
    }
    return this;
  }

  Thumb.prototype.addElement = function(element){
    this.parentElement.append(element).update();
    return this;
  }

  Thumb.prototype.addJSON = function(json){
    var self = this
    $.each(json, function(i, item){
      var img = $('<img src="'+item.src+'" />"' );
      var txt = $('<p>'+item.txt+'</p>');
      ret=$('<div class="griditem" id="'+item.id+'"/>')
        .append(img)
        .append(txt);

      self.addElement(ret)
    })
    return this;
  }


  Thumb.prototype.update = function(){
    $(this.parentElement).find("div.griditem").each(function(i, element ) {
      $(element).hover(function(e){
        $(this).find('img').fadeTo(175,.20);
      }, function(e){
        $(this).find('img').fadeTo(175,1);
      })
    });
    return this;
  }

  Thumb.get = function(jqryElement){
    return thumbs[jqryElement[0]];
  }

  $.fn.thumb = function(obj){
    if( obj === undefined) obj = {parentElement: this};
     
    thumbs[this[0]] = new Thumb(obj);
    console.log(thumbs)
    thumbs[this[0]].update()

    return this;
  }


})()

thumb.css

#content > div> div.griditem {
  padding:0;
  width: 390px;
  height: 219px;
  display:block;

  margin: 20px;

  border: 1px solid #ccc;

  background-color: #eee;
  color: #333;

  float: left;
}



div.griditem img{
  background-color: black;
  position: absolute;
  x:0;
  y:0;
  width: 390px;
  height: 219px;

  z-index:2;
}


div.griditem p {
  margin:0;

  width: 380px;
  height: 209px;

  line-height:231px;
  vertical-align: middle;

  text-align: center;
  text-transform: uppercase;

  font-size: 2.5em;
  font-family: Sans;
}