Thumbnail Image Gallery

Membuat image galeri menggunakan Codecharge adalah perkara mudah. Dengan menggunakan Builder Gallery Builder album gambar ini dapat selesai dengan cepat. Tetapi hasilnya kurang baik bagi pengunjung karena image yang dihasilkan memiliki ukuran yang besar. CodeCharge hanya merubah ukuran panjang dan lebar saja, bukan besaran file (Kb). Tentunya image galeri kita akan sangat lambat tampil. Bayangkan jika kita mengupload 9 gambar dengan ukuran masing-masing 1 Mb. Pengunjung akan cepat-cepat kabur karena Loading yang lama.
Berikut ini saya perlihatkan cara sederhana tapi efektif untuk menampilkan hanya Thumbnails image saja sehingga image galeri kita cepat ditampilkan.

Dalam contoh ini, saya menggunakan script PHP  "Smart Image Resizer" dapat  download di http://shiftingpixel.com/2008/03/03/smart-image-resizer/ Silahkan download dulu dan simpan file image.php di server. Di bawah ini saya copy keterangan dari halaman tersebut. Perhatikan petunjuk penggunaan, terutama bagian path to image.

Features

• Resizes JPEGs, GIFs, and PNGs
• Intelligently sharpens for crisp photos at any size
• Can crop based on width:height ratios
• Can color-fill transparent GIFs and PNGs
• Built-in caching keeps image variations for optimal performance

Requirements

PHP 5.1.0+ compiled with GD. (You need a version of GD that supports imageconvolution(), such as the bundled version. Note that on some distributions, the default php-gd package may not be adequate.)

To Install

1. Unzip on your web server
2. In the same directory, create a directory called “imagecache”
3. Make your imagecache directory is writable by the web server (usually chmod 775)

 Menggunakannya di CodeCharge Gallery Builder.

Gunakan gallery builder seperti biasanya (http://id-codecharge.blogspot.com/2013/01/membuat-gallery-photo-dengan-gallery.html), misal terlihat seperti gambar berikut.

Kemudian masuk ke tampilan HTML, hapus baris imagelink (mulai dari <a href=....... sampai /a>. ganti dengan

<a href="/folder/{Label1}" target="_blank"><img alt="{Label2}" src="/image.php/{Label3}?width=172&amp;height=100&amp;image=/folder/{Label1}" width="172" height="100"></a>

Sesuaikan parameternya dengan keinginan (yang ditandai warna kuning).
Label di buat menggunakan toolbox forms Label.
Untuk Label1 adalah nama file image (dari database ya)
Label2 adalah alt, bisa diambil dari judul gambar di DB
Label3 adalah nama file image juga.

Silahkan preview.
Contoh yang saya buat dapat dilihat di http://www.sistara.com/peta.php