Senin, 14 Januari 2013

Placehold + Placekitten for Display Default Image

Web placehold.it adalah salah satu web yang memberikan jasa menampilkan image (gambar) dengan tampilan secara default (sederhana) Web lain dengan jasa serupa yakni placekitten dengan menampilkan gambar berupa kucing {CAT} Other web placeholder
Lantas buat apa Koben beberkan mereka semua? Gue berbicara tentang Create Your Own Placeholder! Placeholder yg akan dipakai ialah placehold.it & placekitten.com Ke dua web tersebut dikombinasikan agar tercipta random image display di dalam konten post. Seperti itu penjelasannya.
Trik membuat tampilan gambar pada area postingan dengan memakai 2 jasa web diatas, merupakan trick jQuery plugin Syarat utama sudah tentu harus sudah terpasang script<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'></script>DEMO
(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();
});
Markup HTML<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" />
Good luck :)
Resource by: www.github.com

Tidak ada komentar:

Posting Komentar