Display dynamic generated dummy image / placeholders.

jquery.dummyimage.js

$(function(){
  // jQuery - DummyImage
  // Josue Rodriguez (c) 2010-12-30, MIT License
  
  $.fn.dummyImage = (function(options) {

    var opt = {
      'class' : 'dummyImage',
      'display' : 'inline-block',
      'position' : 'relative',
      'background' : 'gray',
      'text-align' : 'center',
      'font' : '12px Verdana',
      'defaultText' : 'Dummy Image',
    };
    var cssText = {
      'position' : 'absolute',
      'top' : 0,
      'left' : 0,
      'color' : '#fff',
      'width' : '100%',
      'height' : '100%',
      'padding-top' : '10%'
    };
    
    $.extend( opt, options || {} );
    
    return this.each(function(i,e) {
      var w = $(this).attr('width') || opt.width || '100px';
      var h = $(this).attr('height') || opt.height || '100px';
      h = !this.style.height && h=="19" && '100px' || h;
      
      var img_align = $(this).attr('align') || 'left';
      var cssPic = { width : '100%', height :'100%' };

      var class = "."+opt.class.replace(".","");
      
      $(this).wrap("<div class='"+opt.class+"' />").parent(class).css(opt);
      $(this).attr('align', img_align).css(cssPic);
      
      var text = $(this).attr('alt') || $(this).attr('title') || opt.text || opt.defaultText || "";
      var s_w = opt.bold && "<b>"+w+"</b>" || w;
      var s_h = opt.bold && "<b>"+h+"</b>" || h;
      text = text.replace("{#}",i+1) + " <br><br>("+s_w+" x "+s_h+")";
      
      if(h.toString().replace(/[^0-9]+/,'')<=20) { cssText['padding-top'] = "2%"; }
      
      $(this).removeAttr('alt').removeAttr('title')
      .parent(class).find('img').before("<span>"+ text +"</span>")
      .end().find('span').css(cssText);
      
      if(opt.tooltip) { $(this).attr('title', w+" x "+h); }
    });
  });

  // Sample Plugin Usage:
  
  $("img[rel=gallery]").dummyImage({ text:"Sample #{#}" });
  
  $("img.dummy").dummyImage({ text:"Dummy Pic" });
  
  $("img[data-dummy]").dummyImage({ tooltip:true, bold:true, width:460, height:155 });

  // DEMO: http://jsbin.com/ayuhi3

});

DEMO: http://jsbin.com/ayuhi3