SimpleViewer Flash Gallery

Sampai saat tulisan ini dibuat, belum ada plugin untuk Drupal yang menggunakan SimpleViewer sebagai basisnya. Sangat kontras dengan Wordpress ataupun Joomla yang memiliki beberapa plugin dengan engine SimpleViewer, bahkan sampai beberapa versi.

SimpleViewer adalah aplikasi gambar berbasis Flash. Ada 2 cara yang dapat kita gunakan untuk menampilkan SimpleViewer: dengan Embed Flash atau dengan menggunakan HTML. Dalam tulisan ini saya akan mencoba untuk membahas cara yang pertama saja. Cara ini tidak terbatas untuk pengguna Drupal saja, tapi dapat di terapkan secara umum pada CMS lain, meskipun ada sedikit langkah yang spesifik untuk Drupal.

Here we go:

1. Download file terkompresi versi terakhir SimpleViewer (v1.8.5)
2. Ekstrak file hasil download ke dalam sebuah folder, misal folder bernama simpleviewer. File-file yang penting adalah gallery.xml, swfobject.js, dan viewer.swf. Anda bisa langsung men-double click file index.html (biasanya selalu disertakan) sebagai demo dan sekaligus untuk menguji apakah browser anda dapat menjalankan aplikasi tersebut.
3. Misalkan anda memiliki situs dengan alamat www.mywebsite.com. Buka file gallery.xml dengan editor favorit anda (gedit, vim, notepad, dsb). Ubah baris berikut:

   <?xml version="1.0" encoding="UTF-8"?>
   <simpleviewergallery maxImageWidth="480" maxImageHeight="480" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="20" stagePadding="40" navPadding="40" thumbnailColumns="3" thumbnailRows="3" navPosition="left" vAlign="center" hAlign="center" title="SimpleViewer Gallery" enableRightClickOpen="true" backgroundImagePath="" imagePath="" thumbPath="">

   menjadi:

   <?xml version="1.0" encoding="UTF-8"?>
   <simpleviewergallery maxImageWidth="480" maxImageHeight="480" textColor="0xFFCC00" frameColor="0xFFCC00" frameWidth="8" stagePadding="40" navPadding="40" thumbnailColumns="4" thumbnailRows="1" navPosition="bottom" vAlign="center" hAlign="center" title="Demo SimpleViewer on Your Drupal site" enableRightClickOpen="true" backgroundImagePath="" imagePath="http://www.mywebsite.com/simpleviewer/images/" thumbPath="http://www.mywebsite.com/simpleviewer/thumbs/">

4. Misalkan lagi anda memiliki 6 file gambar yang ingin dimasukkan dalam slideshow anda yaitu: bike.jpg, bikepark.jpg, boy.jpg, night.jpg, skyline.jpg, umbrellas.jpg. Masih pada file gallery.xml, tambahkan kode dibawah ini tepat sebelum baris </simpleviewergallery> (baris paling akhir):

   <image>
   <filename>bike.jpg</filename>
   <caption>Sepeda</caption>
   </image>
   <image>
   <filename>bikepark.jpg</filename>
   <caption>Taman Sepeda</caption>
   </image>
   <image>
   <filename>boy.jpg</filename>
   <caption>Anak Kecil</caption>
   </image>
   <image>
   <filename>night.jpg</filename>
   <caption>Malam Hari</caption>
   </image>
   <image>
   <filename>skyline.jpg</filename>
   <caption>Langit Biru</caption>
   </image>
   <image>
   <filename>umbrellas.jpg</filename>
   <caption>payung</caption>
   </image>

5. Pindahkan/copy keenam file gambar tadi ke dalam ke dalam folder images dan thumbs. File-file dalam kedua folder harus memiliki nama yang sama. TIPS: Sangat di sarankan untuk membuat file thumbnail (file yang anda masukkan ke dalam folder thumbs) dengan ukuran yang sekecil mungkin. Sebaiknya buat thumbnail dengan ukuran 65x65 pixels. Hal ini akan membuat loading time dari slideshow anda jauh lebih cepat.
6. Upload folder 'simpleviewer' beserta seluruh isinya ke direktori root situs anda. Dalam contoh ini: http://www.mywebsite.com/simpleviewer. Pastikan anda dapat mengakses folder tersebut.
   
7. Buat sebuah node dalam situs Drupal anda, bisa berupa block, blog entry, page, atau sembarang konten yang anda inginkan untuk menampilkan SimpleViewer.
8. Copy kode berikut ke dalam text-area konten editor anda:

   <embed type="application/x-shockwave-flash" width="500" height="500" src="http://www.mywebsite.com/simpleviewer/viewer.swf" allowscriptaccess="never" allownetworking="internal" flashvars="xmlDataPath=http://www.mywebsite/simpleviewer/gallery.xml" bgcolor="#FFFFFF"></embed>

9. Ubah input format dari 'Filtered HTML' menjadi 'Full HTML'. Tentu saja anda harus memiliki privilege untuk mengubah input format tersebut.
10. Save/simpan konten anda, and enjoy you hardwork

Hal menarik yang dapat anda lakukan dengan teknik embedded flash ini adalah anda dapat menampilkan gallery SimpleViewer tadi di akun-akun publik semisal Friendster atau MySpace dengan hanya meng-copy-paste kode pada langkah ke-8 pada kolom media yang disediakan. Secara virtual, anda dapat menampilkan SimpleViewer pada sembarang situs.

SimpleViewer on Frindster.com

SimpleViewer on MySpace.com