◄ Min  Size Fonts: + | - | ± Color: Max ►

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
Loading...
XPlacehold + Placekitten for Display Default Image
Membuat tampilan gambar menggunakan jasa 2 web yaitu Placehold + Placekitten. Dirangkai dengan jQuery jadi keren deh
Subscribe my posts Register For Free!

3 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE