PopUp Gambar, Tulisan (read more), Album Menggunakan Highslide

Yang sering menjadi pertanyaan adalah bagaimana membuat PopUp, baik yang digunakan untuk gambar tunggal, album, atau tulisan (read more yang biasa kita lihat di blog). Banyak cara untuk mewujudkan hal tersebut salah satunya adalah menggunakan script js yang telah didevelop oleh provider tertentu. Highslide.js merupakan salah satu script yang telah dibuat untuk mengatasi berbagai PopUp (http://highslide.com). Pada alamat diatas anda akan mendapatkan paket file PopUp secara gratis beserta gambar dan contoh-contoh menggunakannya. Script ini dual license, yaitu gratis dan berbayar. Gratis jika anda menggunakan untuk keperluan non profit, web personal, sekolah, atau pembelajaran.

Langkah Membuat PopUp

1. Buka http://highslide.com untuk lebih jelasnya english verse

2. Download file highslide.zip di alamat ini

3. Ekstrak pada folder root web kalian, misal http://www.wildan.com/highslide

4. Jika benar maka anda akan mendapatkan 3 folder (exmp, highslide, images) kemudian satu file index.html sebagai contoh

5. Silahkan di klik file index, anda akan mengerti yang dimaksud

6. Untuk latihan coba dulu di laptop anda sendiri sendiri

7. Coba dengan mengambil satu fungsi dulu

Ketik pada head di HTML script dibawah ini :

<script type=”text/javascript” src=”/highslide/highslide.js”></script>
<link rel=”stylesheet” type=”text/css” href=”/highslide/highslide.css” />
<script type=”text/javascript”>
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = ‘/highslide/graphics/’;
</script>

Dan ini untuk di body :

<a href=”images/full-image.jpg”
onclick=”return hs.expand(this)”>
<img src=”images/thumbnail.jpg” alt=”Highslide JS”
title=”Click to enlarge” height=”120″ width=”107″ /></a>

Jika masih belum mengerti, silahkan contoh-contoh dalam zip “highslide-4.1.13.zip” diobok obok, jangan lupa buat site lagi di MacromediaDW atau aplikasi pendukung lain, supaya anda mudah untuk mempelajari script ini.

Advertisements

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