Membuat Thumbnail Image Dengan PHP dan Image Slideshow Dengan Thickbox JQuery
Salah satu fasilitas pada website adalah gallery image, dimana para pengunjung dapat melihat kumpulan koleksi gambar dari pemilik web. Biasanya gallery juga digunakan untuk dokumentasi suatu acara.
Pada pemasangan gallery di web ada satu persoalan yang cukup mengganggu, yaitu masalah ukuran file pada tiap gambar . Oleh karena itu gambar dengan ukuran besar sebaiknya tidak boleh langsung ditampilkan di halaman depan gallery anda, lebih baik buat dulu ukuran kecilnya .
Nah, masalah membuat ukuran kecil ini yang cukup merepotkan apabila kita tidak tahu tekniknya, ternyata PHP memberi kemudahan untuk kita dalam me-resize image itu dalam ukuran kecil untuk ditampilkan , bukan sekedar me-resize lebar dan tinggi gambar namun juga me-resize ukuran byte file, teknik ini dinamakan Thumbnail Image .
Dengan membuat thumbnail terlebih dahulu tentunya pengunjung anda bisa melihat preview gambar anda sebelum melihat ukuran sebenarnya, dan manfaat lain adalah menghemat bandwidth hosting web anda .
Untuk membuat thumbnail pada PHP, anda harus pastikan PHP GD ter-install pada paket PHP anda. PHP GD adalah kumpulan fungsi-fungsi pada PHP untuk memanipulasi image . Untuk mengecek apakah PHP GD sudah ter-install pada paket anda lihat saja di PHPINFO() dan temukan info seperti di gambar di bawah ini.
Mengecek apakah PHP GD sudah ter-install dari PHPINFO()
Untuk install PHP GD, mohon tanyakan sama om Google aja yah… keyword-nya "Install PHP GD". ^_^
Tapi biasanya sih di paket PHP saat ini sudah support PHP GD.
Pada artikel kali ini saya ingin menggabungkan PHP GD untuk membuat thumbnail image dan plugins thickbox jquery untuk membuat slideshow ukuran gambar sebenarnya. Untuk lebih jelasnya tentang thickbox, lihat link ini. .
Berikut adalah preview hasil dari program:
Langkah-langkah pembuatan program, pertama-tama pada " index.php " siapkan script spt ini
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <html> <head> <title>Thumbnail Gallery</title> <script language="javascript" src="includes/jquery.js"></script> <script language="javascript" src="includes/thickbox.js"></script> <link href="includes/thickbox.css" rel="stylesheet" type="text/css" /> </head> <body> <div align="center"> <? $dir = "images/"; // tentukan folder dimana anda menyimpan image if ($handle = opendir($dir)) { echo '<table border=1><tr>'; $x = 0; while (false !== ($file = readdir($handle))){ // looping untuk mendapatkan daftar file pada suatu folder if($file == '.' || $file == '..') continue; // kalau bukan file gambar dihiraukan if($x%4==0) echo '</tr><tr>'; // apabila sudah looping gambar sebanyak 4x maka buat baris baru $path = $dir.$file; /* Perhatikan pada tag <a> ada class="thickbox" --> agar ketika gambar ini di tekan akan terbuka preview gambar tsb pada layar thickbox. Perhatikan juga ada attribute rel="mygallery" --> agar dari gambar satu ke gambar lain terhubung dan pada layar thickbox terdapat link navigator untuk slideshow gambar. Untuk lebih jelas ttg thickbox silahkan melihat manual disini http://jquery.com/demo/thickbox/ */ echo '<td><a href="'.$path.'" class="thickbox" rel="mygallery"><img src="thumb.php?img='.$path.'" border="0" /></a></td>'; $x++; } echo '</tr></table>'; closedir($handle); } ?> </div> </body> </html> |
Sediakan juga " thumb.php " pada direktory yang sama dengan "index.php ".
<? isset($_GET['img']) or die('NO IMAGE'); include "includes/thumbnail.class.php"; $thumb = new T10Thumbnail; $thumb->setMaxWidth(80); // lebar maksimal untuk setiap image adalah 80px $thumb->getThumbnail($_GET['img']); // generate thumbnail image ?>
Sedangkan fungsi-fungsi untuk membuat Thumbnail Image ada di file " thumbnail.class.php " pada folder "includes/".
<? class T10Thumbnail{ var $maxWidth = 200; // default lebar maksimal adalah 200px function setMaxWidth($maxWidth){ // method untuk mengubah nilai lebar maksimal $this->maxWidth = $maxWidth; } function getThumbnail($path){ $maxheight = $this->maxWidth; // tinggi maksimal disamakan saja dengan lebar maksimal if(file_exists($path)){ // cek apakah file yang akan di resize ada list($width,$height)=getimagesize($path); // untuk mendapatkan lebar dan tinggi gambar // jika lebar image lebih kecil dari ukuran thumbnail yang ditentukan maka tidak perlu di hitung lagi ratio ukurannya if($width < $this->maxWidth){ $new_width = $width; $new_height = $height; }else{ if($width>$height) $ratio=$this->maxWidth/$width; else $ratio = $maxheight/$height; $new_width = $ratio*$width; $new_height = $ratio*$height; } $path_parts = pathinfo($path); switch($path_parts['extension']){ // ambil extension file untuk mengecek tipe image case "jpeg": case "jpg": $header = "jpeg"; $func1="imagecreatefromjpeg"; // fungsi untuk generate image jpg $func2="imagejpeg"; // fungsi untuk generate image jpg break; case "gif": $header = "gif"; $func1="imagecreatefromgif"; // fungsi untuk generate image gif $func2="imagegif"; // fungsi untuk generate image gif break; case "png": $header = "png"; $func1="imagecreatefrompng"; // fungsi untuk generate image png $func2="imagepng"; // fungsi untuk generate image png break; } // membuat file php ini ketika dipanggil di browser adalah berupa image header("Content-type: image/$header"); $thumb = imagecreatetruecolor($new_width,$new_height); // buat resource image dalam ukuran thumbnail $source = $func1($path); // generate image imagecopyresized($thumb,$source,0,0,0,0,$new_width,$new_height,$width,$height); // thumbnail ukuran image $func2($thumb); // generate image } } } ?>
Penjelasan program saya langsung tulis di setiap script. Dan untuk melihat demo dari program ini klik Link ini .
Download juga program ini di Link ini .
Update 23 Juni 2010:
Untuk versi dengan paging, silahkan download Link ini. Replace file “index.php” di script sebelumnya dengan “index.php” di file “thumbnailgallery_paging.zip”. Lalu tambahkan juga “paging.class.php” sejajar dengan file “index.php”.
Semoga Bermanfaat… Terima kasih… ^_^
Loading ...
Chandra Jatnika
Wah.. top markotop.
O ya , saya minta tolong di buatkan artikel mengenai cara membuat ARIP ARTIKEL berdasarkan Bulan dan Tahun. Contohnya pada web anda ini dengan nama ARCHIVES… di tunggu ya.. TENX BERAAAAT..
thank yah.. buat tutorialnya.. TOP bgt dah… apalagi lg coba2 pake jquery….
makasih banged nich tutorialnya aku jadi bisa ikutan belajar n bisa bawa oleh2 (download) program dari blogwalking ke sini… lain kali aku mampir lagi… boleh ya?
iya mas sapta, sering-sering aja mampir…hehehe
Mas mau tanya.. cara buat “block kode” seperti yang mas tulis itu gimana ya?, namanya apa?..
Di artikel mas kan ada kode program-nya.. Nah cara ngeblok kode program itu gimana caranya mas..
Makasih ya mas.
saya minta artikelnya buat dokumentasi saya di website..
Utk tampilin script dengan format seperti di web saya pake plugins wp-syntax mas
http://wordpress.org/extend/plugins/wp-syntax/
wiih… MANTAB……..ten ….
kembangkan terus yah hehe
Mantab mas…
Makasih ya tutorialnya… salam kenal
mas..nanya, gimana kalo untuk blogspot?
saya mau bikin slide show yang modelnya seperti filmstrip seperti JonDesign’s tapi tidak terlalu banyak mengapload java. ini supaya tidak terlalu berat loadingnya.
http://anggaran-budget-manipulation.blogspot.com
http://e-serba-serbi.blogspot.com/
masalahnya blogspot gak support PHP mas, klo di wordpress mungkin masih bisa.
Bagus… artikelnya…
boss T-10 punya artikel untuk multiple keyword search gak…
salam,
ivink3aray
Thnks atas ilmunya …
tolong dong pak, script ubah dan hapus thumbenailnya
masalahnya ini gak pake database tapi baca dari direktori yang sudah ditentukan, klo kmu mau nambahin, edit ato hapus data bisa aja asal file yang di upload kmu taro di direktori yg sudah ditentukan tsb
Thanks tutorialnya.. very nice tutorials..
muantap bgt tueh..tHX BGT TOP BGT DAH
tq banget nih, buat tugas kuliah gw membantu tq ya
Tolong tambahin script buat nampilin nama tilte pada setiap gambar sesuai denga nama file nya???Terima kasih
pada line ke-28 jadiin kyk gini aja mas
@admin
terima kasih…..ini tadi saya mencoba dengan data gambar lebih dari 100…tampilannya kok 1 halaman…bagaimana cara buat paging nya?
terima kasih
buat mas aruld dan pembaca lain yang menanyakan paging, silahkan download Link Ini. Replace file “index.php” di script sebelumnya dengan “index.php” di file “thumbnailgallery_paging.zip”. Lalu tambahkan juga “paging.class.php” sejajar dengan file “index.php”.
Semoga terbantu masalahnya… ^_^
@admin
terima kasih pak….sangat membantu sekali….
lagi belajar nie hehehe
wah, terima kasih atas infonya…..sangat membantu sekali…
klu pke dtabase gmn??
cpt blz y