jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada situs-situs profesional. Berbeda dengan jQuery Lazyload yang pernah dibahas disini dan versi update disini. Jika di tilik dari fungsinya, sebenarnya plugin ini hanyalah tambahan untuk mempercantik penampilan gambar. Plugin jQuery Image Preloader berfungsi untuk memberikan efek delay (lambat) pada saat proses pemanggilan (load) gambar pada halaman situs, selama pemanggilan gambar belum sempurna maka lokasi gambar tersebut akan di gantikan dengan animasi loading. Setelah gambar tersebut siap ditampilkan (load 100%), animasi loading akan di sembunyikan dan gambar akan ditampilkan dengan efek fade yang lembut. Plugin ini akan memberikan kesan profesional pada blog dan menunjukan kepada pengunjung bahwa bagian yang terkecil sekalipun sangat diperhatikan sang pemilik blog. Bagaimana cara memanfaatkan plugin ini?
Skenario HTML
Sebagai contoh, dibawah ini kita akan membuat sebuah galeri gambar dengan skenario seperti dibawah ini.
<ul id="gallery" class="clearfix">
<li><p><a href="#"><img src="images/1.jpg" /></a></p></li>
<li><p><a href="#"><img src="images/2.jpg" /></a></p> </li>
<li><p><a href="#"><img src="images/3.jpg" /></a></p> </li>
<li><p><a href="#"><img src="images/4.jpg" /></a></p></li>
</ul>
Skenario diatas hanyalah contoh, selanjutnya silahkan anda kembangkan sendiri. Silahkan lihat pada file source code yang sudah didownload pada file index.html.
Skenario CSS
Kemudian buatlah skenario CSS dibawah ini untuk mengatur posisi dan properti lainnya agar tampilan galeri menjadi lebih rapi dan menarik.
#gallery {
list-style:none;
}
#gallery li {
background:#e8e8e8;
float:left;
display:block;
margin:15px 56px;
display:block;
border:1px solid #d7d7d7;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
padding:0;
-webkit-box-shadow:1px 1px 6px #ddd;
-moz-box-shadow:1px 1px 6px #ddd;
box-shadow:1px 1px 6px #ddd;
}
#gallery li p {
border:1px solid #ffffff;
padding:7px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px; margin:0;
}
#gallery li a {
display:block;
color:#fff;
padding:0;
text-decoration:none;
}
#gallery img {
width:315px;
height:210px;
margin:0;
padding:0;
}
.preloader {
background:url(i/89.gif) center center no-repeat #ffffff;
}
Pelajari skenario CSS ini pada folder css yang disertakan pada source code yang sudah di download. Untuk animasi loading anda bisa memilihnya pada situs Preloaders.net yang tersedia banyak dan bagus-bagus. Setelah itu gantilah icon 89.gif yang terdapat pada kode CSS .preloader. Jika icon tidak bisa ditampilkan, pastikan bahwa .preloader memiliki properti display yang diset inline-block atau block.
Skenario jQuery
Mengenai detail plugin jQuery Image Preloader akan di bahas pada artikel terpisah. Dibawah ini adalah kode yang siap digunakan pada halaman situs.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/jquery.preloader.min.js"></script>
<script type="text/javascript">
$(function(){
$("#gallery").preloader();
});
</script>
#gallery merupakan kunci untuk memberikan efek preload pada gambar. Anda bisa saja menggantinya sesuai dengan target gambar yang akan dipengaruhi plugin ini. #gallery merupakan id yang ada pada skenario HTML (perhatikan skenario HTML diatas yang tertulis ul id="gallery").
Demikian tutor singkat mengenai Plugin jQuery Image Preloader. Bagaimana integrasi pada template Blogger?
Selamat mencoba dan semoga berhasil... Happy Blogging :)
