Thursday, February 09, 2012

joomla_tip_thumbMenanggapi pertanyaan rekan pembaca di komentar tulisan saya sebelumnya, tentang munculnya gambar yang diperbesar saat di klik (popup), berikut beberapa trik yang bisa anda lakukan…

1. Menggunakan Plugin Mavic Thumbnail

Mavic Thumbnail merupakan plugin simple yang telah dibuat oleh Mas Mavic dari Rusia. Pluginnya pun cukup simple. Hanya menginstalnya seperti menginstal plugin lainnya:

  • Download Mavic plugin di download manager.
  • Login ke administrator Joomla anda (Back end)
  • Arahkan ke > Extensions > Install/Uninstall.
  • Pada bagian Upload Package File klik Browse dan pilih plugin yang telah di download. Kemudian klik Upload File & Install. Jika berhasil maka ada pemberitahuan yang menyatakan bahwa penginstalan berhasil.
  • Kemudian aktifkan plugin yang telah di install melalui > Extensions > plugin manager > mavik Thumbnails
  • Lakukan penyetingan sesuai yang anda kehendaki, jangan lupa pilih enabled = yes dan setelah selesai klik save untuk menyimpan perubahan.

Cara menggunakan: cukup upload gambar anda di artikel joomla, kemudian perkecil gambar (Ukuran thumbnail) sesuai dengan yang anda kehendaki.


2. Menggunakan Plugin Rokbox

RokBox, merupakan penerus plugin RokZoom populer, menggunakan JavaScript melalui Mootools slideshow yang memungkinkan Anda untuk dengan cepat dan mudah menampilkan beberapa format media termasuk foto, video atau audio. Seperti pada Mavic Thumbnail, di sini pun anda harus menginstal plugin. Ada dua plugin yang harus anda install: system dan content.

Daftar lengkap format media yang didukung

  • Gambar: Link yang berekstensi .Gif,. Jpg,. Jpeg,. Png atau. Bmp
  • Generic Video: Link yang berekstensi . Mov,. M4v,. Qt,. Mpeg,. Divx,. Avi,. Xvid,. Wmv,. Wma,. Lilin,. Wvx,. Asx,. Asf
  • Video Sharing: YouTube (HD termasuk), DailyMotion, Metacafe, Google Video, Vimeo, Simple. Swf
  • FLV: Built-in FLV player menggunakan JW FLV Player
  • Audio: Link yang berekstensi:. Mp3,. Wav,. M4a
  • PDF: Link yang berekstensi :. Pdf
  • Lokal dan Remote URI

Fitur-fitur

  • Kompatibel untuk Mootools v1.11
  • 4 tipe Transisi: Fade, Quicksilver, Growl, Explode.
  • Dukungan untuk Foto, QuickTime (. Mov,. M4v), Windows Media Video (. Wmv), Flash (. Swf), YouTube, DailyMotion, MetaCafe, Google Video, Vimeo, Audio (. Mp3,. Wav,. M4a)
  • lokal dan remote site.
  • Dukungan untuk album / kategori.
  • Kemampuan untuk popup RokBox dalam pixel atau persentase dan fullscreen relatif terhadap jendela browser.
  • Dukungan untuk judul dan deskripsi.
  • 2 pradefinisi Theme yang disediakan: Light Theme dan Dark Theme.
  • Kemampuan untuk menghasilkan auto-thumbnail di RokBox pada gambar lokal.
  • Dukungan untuk menghasilkan inline thumbnail atau link dari konten Joomla!.

Cara Menginstal

Anda dapat menginstal RokBox untuk Joomla! 1.5 dengan beberapa langkah, seperti cara di atas:

  • Download "System - RokBox" dan "Content - RokBox" di download manager.
  • Login ke administrator Joomla anda (Back end)
  • Arahkan ke > Extensions > Install/Uninstall.
  • Pada bagian Upload Package File klik Browse dan pilih plugin yang telah di download. Kemudian klik Upload File & Install. Jika berhasil maka ada pemberitahuan yang menyatakan bahwa penginstalan berhasil.
  • Kemudian aktifkan plugin yang telah di install melalui > Extensions > plugin manager > "System - RokBox" dan "Content - RokBox"
  • Lakukan penyetingan sesuai yang anda kehendaki, jangan lupa pilih enabled = yes dan setelah selesai klik save untuk menyimpan perubahan.
  • Gambar parameter pluginnya seperti berikut:
Rokbox-content
Rokbox-system


Penggunaan Plugin pada Artikel


Agar plugin bekerja dengan baik, perlu sedikit ‘usaha’ dengan merubah script pada artikel anda, contoh script dan hasilnya, silakan anda pelajari di link berikut:

Demo Rokbox

Tips Mudah:

Jika anda merasa repot dengan syntac yang ada, berikut tips mudah yang dapat anda gunakan: Cukup copy script  rel='rokbox' ke dalam link di artikel anda. Baik link image atau link URL. Contohnya:

<a rel="rokbox"  target="_blank" title="My Little Notes" href="http://www.agussuwasono.com/">Demo Rokbox</a>
atau
<a rel="rokbox" target="_blank" href="http://www.download.agussuwasono.com/images/stories/mavic.jpg">

Semoga bermanfaat.

blog comments powered by Disqus
Category: Joomla Tutorials