Menampilkan Gambar dengan berbagai animasi menggunakan JQUERY (bag. 1)


Akhirnya bisa nulis artikel lagi di blog ini setelah seminggu lebih gak nulis hehe..🙂. Ok.. untuk artikel kali ini saya akan mencoba untuk menampilkan gambar dengan berbagai animasi menggunakan JQuery FancyBox. Apa itu jquery fancybox ?? fancybox merupakan plugin jquery untuk menampilkan gambar dengan berbagai macam animasi. 

Contohnya bisa dilihat disini. Tertarik kan ?? hehe🙂

Berikut ini adalah step-step dalam pembuatannya.

  1. Download terlebih dahulu library JQuery disini dan jquery fancybox. Lalu extraxt fancybox.
  2. Pindahkan gambar-gambar yang akan ditampilkan ke folder yang sama dengan jquery dan fancybox
  3. Sehingga isi foldernya seperti berikut. 
  4. Buat file yang bernama coba_fancybox.html (di folder yang sama dengan jquery dan fancybox) dan masukan kode html + jquery berikut di file tersebut (coba_fancybox.html)
    <html>
    	<head>
    		<title>Coba Fancybox</title>
    		<script type="text/javascript" src="jquery-1.4.3.min.js"></script> <!-- Sertakan JQuery !-->
    		<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <!-- Sertakan JQuery mousewheel untuk image gallery!-->
    		<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script> <!-- Sertakan JQuery fancybox dan cssnya-->
    		<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    		<script type="text/javascript">
    			$(function(){
    				$('#g1').fancybox();				//Untuk Gambar 1
    
    				$('#g2').fancybox({					//Untuk Gambar 2
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'elastic',
    				'titlePosition' : 'inside'
    				});
    			});
    		</script>
    	</head>
    	<body>
    <img href='gambar1.jpg' src='gambar1a.jpg' title="Ini gambar nomor 1" id="g1" />
    <img href='gambar2.jpg' src='gambar2a.jpg' title="Ini gambar nomor 2" id="g2" />
    	</body>
    </html>
    

    Keterangan Kode :

    • Baris ke 4 , 5, 6, dan 7 artiya file coba_fancybox meyertakan jquery, jquery mousewheel (untuk pembuatan navigasi di image galley), jquery fancybox dan jquery fancybox.css (pengaturan css di fancybox). keempat file tersebut harus disertakan agar bisa menampilkan gambar dengan berbagai animasi.

    • Baris ke-21 artinya kita ingin menampilkan gambar1.jpg dengan judul ini gambar nomor 1 dan id=g1.

    • Baris ke-22 artinya kita ingin menampilkan gambar2.jpg dengan judul ini gambar nomor 2 dan id=g2.

    • Baris ke-10 artinya menampilkan yang ber id-1 (gambar 1) menggunakan jquery fancybox

    • Baris ke-12 sampai 16 artinya menampilkan yang ber id-2 (gambar 1) menggunakan jquery fancybox dengan berbagai parameter. Di script tersebut terdapat parameter transitionIn (ketika gambar ditampilkan), transitionOut (ketika gambar di close), dan titlePosition untuk menentukan posisi judul. Selain ketiga parameter tersebut terdapat parameter2 yg lain yang bisa dilihat di sini

  5. Coba index.html di folder kesayangan anda, Mudah kan🙂

Jika ingin gambar-gambarnya dibuat menjadi image gallery silahkan unduh jquery fancybox disini dan buka index.html menggunakan text/html editor seperti dreamweaver ataupun notepad. Lalu perhatikan kode pada bagian $(“a[rel=example_group]”).fancybox di javascript dan gambar 9_b sampai 12_b di dalam htmlnya.

Pada artikel bagian 2 nanti akan saya jelaskan cara menampilkan gambar dimana gambar-gambar yang akan ditampilkan disimpan terlebih dahulu di database sebelum ditampilkan. Jadi tunggu saja ya.. hehe🙂

NB : Selain jquery fancybox terdapat beberapa pilihan plugin jquery yang bisa menampilkan gambar dengan animasi juga. contohnya jquery lightbox dan TINYBOX .

Demo

About Wendi
An Extraordinary man wannabe. add my FB : https://www.facebook.com/wendi.octavious

3 Responses to Menampilkan Gambar dengan berbagai animasi menggunakan JQUERY (bag. 1)

  1. Pingback: Menampilkan data secara langsung tanpa harus klik tombol menggunakan Jquery « belajarbuatprogram

  2. Pingback: Cara Mudah Cek Kekuatan/Kerumitan Password dengan JQuery « belajarbuatprogram

  3. Pingback: Cara Mudah Cek Kekuatan/Kerumitan Password dengan JQuery - Belajar Buat Program » Belajar Buat Program

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