jQuery Placehold by Beben Koben

by Beben Koben

HTML

<div id="wrapper">
 <div id="center">
<img src="http://placehold.it/100x200" />
<img src="http://placehold.it/200x200" />
<img src="http://placehold.it/250x200" />
<img src="http://placehold.it/255x200" />
<img src="http://placehold.it/300x200" />
				</div>
			</div>

CSS

body {
	background-color: #debe94;
	margin: 0px;
  color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;
}
div#wrapper {
	height: 0px;
	position: absolute;
	overflow: visible;
	display: block;
	width: 100%;
	left: 0px;
	top: 50%;
}
div#center {
	overflow: auto;
	position: absolute;
	left: 50%;
	margin-left: -200px;
	width: 565px;
	height: auto;
	top: -150px;
}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}

JavaScript

(function ($) {
    $.fn.placekitten = function () {
        this.find('img,a,div').each(function (i, element) {
            var w, h;
            switch (element.nodeName) {
                case 'IMG':
                    w = element.width;
                    h = element.height;
                    if (w && h) {
                        var src = 'http://placekitten.com/' + w + '/' + h;
                        element.src = src;
                    }
                    break;
                case 'A':
                case 'DIV':
                    var background = $(element).css("background-image");
                    if (background.indexOf('url(') > -1) {
                        w = $(element).width();
                        h = $(element).height();
                        $(element).css("background-image", "url(http://placekitten.com/" + w + "/" + h + ")");
                    }
                    break;
            }
        });
    };
})(jQuery);
$(function () {
    $('body').placekitten();
});