Script: Membuat Image Gallery Berubah

Script: Membuat Image Gallery Berubah - Pemasangan script pada blog masih menjadi hal yang mengkhawatirkan bagi kebanyakan blogger karena mereka selalu beranggapan jika didalam blog ditambah dengan script maka akan mempengaruhi loading blog tersebut, yaitu loading blog akan menjadi lambat. Padahal tidak semua script akan membuat loading blog lambat. Salah satu script yang tidak membuat loading blog lambat adalah script membuat image gallery berubah ini. Script image gallery, ini akan membuat tampilan gambar berubah-ubah secara manual yaitu saat browser di-refresh, seperti yang terlihat pada tampilan gambar berikut ini

Lihat DEMO

Atau lihat juga efek menakjubkan pada image profil blog sobat di Image blogroll menakjubkan

Script Membuat Image Gallery Berubah ini sangat simpel dan mudah dipasang dan tidak perlu khawatir dengan loading blog sobat, Jika sobat tertarik untuk memasangnya, silahkan gunakan kode-kode berikut ini

CSS
Kode CSS yang digunakan sangat sedikit. Silahkan salin kode CSS untuk image gallery berikut ini. Salin sebelum kode ]]></b:skin> atau sebelum kode </style>

.tiles-item .caption{background:rgba(0,0,0,.8);color:#fff;font-size:12px;}
.tiles-item .caption span{margin:10px;display:block;font-family:Arial;font-size:14px;font-weight:normal;}
.tiles img{display:none;}
.tiles{margin:0 auto;}

Script
Ada 2 script yang perlu disalin, script yang dibawah ini silahkan disalin sebelum kode </head> didalam template blog sobat

<script type='text/javascript'>
$(function () {
$(&quot;.tiles&quot;).tilesGallery({
tileMinHeight: 200
});
});
</script>

Sedangkan script berikut ini yang merupakan jQuery dari script membuat image gallery ini disalin sebelum kode </body>

<script src='http://yourjavascript.com/072135429/jquery-tiles-gallery.js' type='text/javascript'/>

HTML
Untuk melihat hasilnya setelah memasang kode CSS dan script untuk image gallery berubah ini, gunakan kode markup HTML berikut ini. Salin ditempat yang sobat inginkan, bisa di sidebar atau pun didalam artikel blog

<div class="tiles">
<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan sobat</span></p>
<img src="link-gambar-sobat.jpg" />
</a>
</div>

Untuk 2 gambar kodenya:
<div class="tiles">
<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan sobat</span></p>
<img src="link-gambar-sobat.jpg" />
</a>

<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan sobat</span></p>
<img src="link-gambar-sobat.jpg" />
</a>
</div>

Untuk 3 gambar kodenya:
<div class="tiles">
<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan sobat</span></p>
<img src="link-gambar-sobat.jpg" />
</a>

<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan sobat</span></p>
<img src="link-gambar-sobat.jpg" />
</a>

<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan sobat</span></p>
<img src="link-gambar-sobat.jpg" />
</a>
</div>

Dan untuk beberapa seterusnya...

Penjelasan: Sudah sangat jelas, cukup mengganti apa yang perlu diganti pada kode HTML diatas yaitu link gambar dan tulisan

Bagaimana tertarik untuk membuat dan memasang image gallery berubah ini kedalam blog sobat?