Lightbox gallery sederhana pada Balitbang

Selamat sore para pengguna cms balitbang, selamat menjalankan ibadah puasa bagi yang menjalankannya.
Sesuai judul, saya ingin berbagi tentang bagaimana membuat lightbox gallery sederhana pada cms balitbang kebetulan baru selesai utak atik sambil ngabuburit.
Live Gallery nya bisa dilihat di http://smk4.mahadhika.or.id/html/index.php?id=galeri&kode=2
Membuatnya cukup simple dan mudah:

Download attachment yang saya sertakan (lightbox2.05.zip) esktrak dan upload ke direktori template aktif anda
Buka file index.tpl.htm pada template aktif anda dan masukkan script berikut:

<!– LightBox –>
<script type=”text/javascript” src=”{path}js/prototype.js”></script>
<script type=”text/javascript” src=”{path}js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”{path}js/lightbox.js”></script>
<link rel=”stylesheet” href=”{path}lightbox.css” type=”text/css” media=”screen” />
<!– End LightBox –>

Buka file fungsi_gallery.php

baris 151
$galeri .=” <a href=’../images/galeri/gb$row[id].jpg’ target=’_blank’ title=’Lihat Photo’>

Rubah menjadi:
$galeri .=” <a href=’../images/galeri/gb$row[id].jpg’ rel=’lightbox’ title=’Gallery Sekolah’>

baris 155:
$galeri .=”<a href=’../images/galeri/gb$row[id].jpg’ target=’_blank’ title=’Lihat Photo’>

rubah menjadi:
$galeri .=”<a href=’../images/galeri/gb$row[id].jpg’ rel=’lightbox’ title=’Gallery Sekolah’>

Sekarang pengunjung tidak akan dilarikan ke jendela baru setiap mengklik gambar. Selamat mencoba.

Sumber:
http://www.lokeshdhakar.com/projects/lightbox2/

This entry was posted in Tips, Widget. Bookmark the permalink.

One Response to Lightbox gallery sederhana pada Balitbang

  1. Rumah Quran says:

    2 kebingungan yang saya hadapi :
    1. Bagaimana cara mengetahui template aktif?
    2. Kode di atas di simpannya di sebelah mana? setelah kode apa di simpannya?
    Mohon bantuannya…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s