Slideshow Cantik (SmoothGallery2.1dev)

Hei, mau Website tampil cantik? Khususnya Website Anda merupakan website yang mengutamakan gambar? seperti Studio Foto, Butik, Dll, Coba salah satu Slide Show dari sekian Slide Show terbaik, slide show ini cantik sekali, disamping tentunya kita lebih mengirit ruangan Website kita untuk menata ganbar yang banyak, slideshow pasti amat dibutuhkan...Slideshow ini keluaran JonDesign's Contoh slideshownya ada di bawah ini, SlideShow bisa dikonfigurasi sendiri dari segi timed/tidak (otomatis jalan sendiri/tidak), size, frame, pic, dll) karena dari segi desain tetap menggunakan CSS, untuk contoh ada dibawah ini...Nice kan :)...

 

Langkah Pertama

Masukkan kode berikut di dalam Header Webmu (Antaradan)

<script src="/adminweb/scripts/mootools.v1.11.js"></script>
<script src="/adminweb/scripts/jd.gallery.js"></script> 

Juga CSS berikut dibawahnya

<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" /> 

 

Langkah Kedua

Definisikan isi dari slideshow (isi gambar-gambar slideshow),

<!-- /Awal Galery--> 
<div id="myGallery"> 

<!-- /Gambar Pertama--> 
<div class="imageElement"> 
<h3>Item 1 Title</h3>
<p>Item 1 Description</p> 
<a href="#" title="open image" class="open"></a> 
<img src="images/brugges2006/1.jpg" class="full" /> 
<img src="images/brugges2006/1-mini.jpg" class="thumbnail" /> 
<!-- /Akhir Gambar Pertama--> 

<!-- /Gambar Kedua --> 
</div><div class="imageElement"> 
<h3>Item 2 Title</h3> 
<p>Item 2 Description</p> 
<a href="#" title="open image" class="open"></a> 
<img src="images/brugges2006/2.jpg" class="full" /> 
<img src="images/brugges2006/2-mini.jpg" class="thumbnail" /> </div> 
<!-- /Akhir Gambar Kedua --> 
 
</div> <!-- /Akhir Galery--> 

Contoh diatas terdiri dari Gambar, tapi bisa ditambah sesuka hati, sesuai kebutuhan, tinggal ulangi dan tambah, jika sudah terintegrasi dengan database tinggal kita gunakan While tentunya lebih mudah Flexible..

Langkah Ketiga - Finishing Bro...

Letakkan Kode berikut dihalaman HTML/PHP/ASP dibawahatau sesuai halamanmu, yang pasti diatas dari Langkah Kedua diatas...

<script type="text/javascript"> 
function startGallery() { 
var myGallery = new gallery($('myGallery'), { 
timed: true }); 
} 
window.addEvent('domready', continuoushorizontal); 
</script>

Jika mau slideshow tidak bergerak secara otomatis ganti timed: true menjadi timed: false..

 

Tambahan

Kalau mau sesuaikan ukuran agar lebih pas di halaman Webmu bisa ubah CSS berikut...

#myGallery
{
width: 400px !important;
height: 200px !important;
}

Oke, tapi sebelum itu semua kau running perlu download dulu file mootools.v1.11.js, jd.gallery.js dan jd.gallery.css

Bisa didownload di sini:
slideshow_SmoothGallery.rar

Atau lebih detail bisa kunjungi di:
smoothgallery.jondesign