Membuat Slideshow Headline Berita Sederhana Dengan JQuery (+Efek Animasi)

(20 votes, average: 4.35 out of 5)

Loading ...

5,536 views

Jika berbicara tentang sarana interaktif pada web di era saat ini. Efek slideshow tentunya paling sering digunakan oleh website-website yang mengandung content berupa berita. Slideshow biasa diisi dengan rangkuman-rangkuman berita terkini (Headline) agar pengunjung dapat memantau perkembangan berita terkini dengan sajian efek slideshow yang menarik dan tidak akan cepat membuat pengunjung bosan.

Contoh slideshow yang akan kita bangun pada artikel kali ini adalah seperti gambar berikut:

Kunci dari pembuatan fasilitas ini pada halaman web anda adalah CSS + JavaScript. Untuk membuatnya pertama kali buat halaman HTML seperti ini:

<div id="divTrigger">
 <a href="javascript:;" onClick="openContent(this,'div1')" id="firstSlide">1</a>
 <a href="javascript:;" onClick="openContent(this,'div2')">2</a>
 <a href="javascript:;" onClick="openContent(this,'div3')">3</a>
 <a href="javascript:;" onClick="openContent(this,'div4')">4</a>
</div>
 
<div id="divContent">
 <div id="div1">
    <span class="title">Pemandangan Pantai</span>
 	<img src="images/img1.jpg" align="left" /> Pemandangan pantai memang menakjubkan, dengan berdiam diri sejenak dan
 	melihat pemandangan pantai niscaya kita akan mendapatkan kedamaian jiwa.
 </div>
 <div id="div2">
    <span class="title">Dua Pinguin</span>
 	<img src="images/img2.jpg" align="left" /> Pinguin adalah spesies makhluk hidup yang langka dan hanya terdapat pada
 	benua tertentu di bumi ini. Oleh karena itu kita penduduk dunia harus melestarikannya.
 </div>
 <div id="div3">
 	<span class="title">Pepohonan Sejuk</span>
 	<img src="images/img3.jpg" align="left" /> Ini adalah gambar wallpaper pilihan saya ketika sedang bekerja, dengan 
 	melihat gambar ini hati terasa menjadi lebih tenang.
 </div>
 <div id="div4">
 	<span class="title">Hujan Sakura</span>
 	<img src="images/img4.jpg" align="left" /> Menikmati bunga sakura bagi warga jepang adalah tradisi musiman yang 
 	menyenangkan pada saat memasuki musim dingin.
 </div>
</div>

Lalu persiapkan CSS seperti ini:

 #divTrigger a:link,#divTrigger a:visited{
	text-decoration: none; /* hilangkan garis bawah pada link */
	margin:4px 0px; /* memberi jarak antar link */
	padding: 1px 4px; /* menjadikan link seperti kotak */
	border: 1px solid #CCC;
	background-color: #FFF;
	color: #000;
 }
 /* link yang dilalui oleh mouse dan element dengan class='selected' akan mempunyai efek yang sama */
 #divTrigger a:hover,#divTrigger a:active,.selected{ 
	background-color: #00A;
	color: #FFF;
 }
 #divContent{
	margin-top:4px;
	border:1px solid #CCC;
	width: 300px;
	height: 220px;
	padding: 4px;
 }
 #divContent div{ 
	/* semua div di dalam element dengan id='divContent' akan di sembunyikan sementara */
	display:none
 }	
 .title{
	font-size: 16px;
	font-weight: bold;
	color: #006;
	text-decoration: underline;
	margin-bottom: 2px;
	display:block
 }

Dengan menggunakan framework JavaScript JQuery kita akan lebih mudah berkreasi dengan efek slideshow. Contoh script-nya seperti ini:

<script language="javascript" src="jquery.js"></script>
<script language="javascript">
 /* parameter untuk menjalankan fungsi openContent ini adalah 	 
	 1. Element trigger (link) yang akan membuka content apabila di click
	 2. Id dari content yang akan ditampilkan
  */
 /* Update 08 Maret 2009
	 -> Slideshow diberikan animasi otomatis berpindah-pindah content		 
 */
 // siapkan variable timer yang akan menyimpan fungsi animasi 
 var timer = null; 
 function openContent(trigger,divID){ 
	// semua link pada div dengan id='divTrigger' akan di setarakan style-nya menjadi style normal 
	$('#divTrigger a').each( 
		function(){
			$(this).css({'background-color':'#FFF','color':'#000'});			 	
		}
	);
	// semua div di dalam element dengan id='divContent' disembunyikan
	$('#divContent div').hide();
 
	// div yang akan ditampilkan diberi efek fadeIn (built-in dari JQuery) ketika ditampilkan
	$('#'+divID).fadeIn('slow');
 
	// link menjadi trigger diberi style berbeda dengan link lainnya agar dapat diketahui content nomor berapa yang sedang aktif
	$(trigger).css({'background-color':'#00A','color':'#FFF'});	 	
 
	// Update 08 Maret 2009
	// timer di set 
	if(timer != null) clearTimeout(timer);
	timer = setTimeout( 
	  function(){		
		/* Cek terlebih dahulu apakah link yang sedang di-click saat ini ada link lagi setelah itu
		   apabila tidak ada link lagi setelah element yang sedang di-click maka pilih element link pertama
		   dengan selector ':first' dari jquery. Setelah sudah ditentukan link, maka lakukan event click
		   pada link tersebut. Setiap link yang di click akan menjalankan fungsi ini sehingga terjadi animasi
		   perpindahan content slideshow.
		*/	  
		var nextAnchor = ($(trigger).next('a').text() == '') ? $('#divTrigger a:first') : $(trigger).next('a');
		nextAnchor.click();
	  }, 3000 // 3 detik waktu perpindahan content
	);
 }	 
 $(document).ready(
	function(){
		// untuk permulaan, tampilkan content nomor pertama '#firstSlide' adalah id dari trigger yang akan membuka content nomor pertama
		openContent($('#firstSlide'),'div1');			
	}
 )
</script>

Update pada tanggal 08 Maret 2009:
Kini slideshow dapat secara otomatis berpindah-pindah content. Terima kasih
atas masukan para pengunjung web chandrajatnika.com.

Update pada tanggal 06 Mei 2009:
Download juga tutorial agar data slideshow dapat diambil dari database sehingga slideshow menjadi dinamis DISINI.

Demo aplikasi dapat anda lihat di Link ini

Download aplikasi lengkap pada Link ini

Semoga bisa bermanfaat… ^_^

Posted in JQuery, JavaScript, Snippets. Tagged with DHTML, JavaScript, JQuery, Slideshow, Snippets.

By admin

March 5, 2009

40 comments

40 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

newbie_bangetzz said

on March 5, 2009

wah keren ni mas chandra atikelnya…
sangat membantu sekali, kebetulan lagi nyari image slide show…

harry said

on March 6, 2009

keren ya!!!!

Baronk said

on March 8, 2009

Tenx Berat Om Ariel Peterpan..he..he.. habis wajahnya mirip Ariel peterpan seh

Baronk said

on March 8, 2009

Om mau naya nih gimana caeanya buat subdomain pakai PHP untuk setiap user yang mendaftar pada wbsite kita. Contohnya seperti di blogspot.com. Misalnya namasaya.blogspot.com

Tenx ya!

dee said

on March 8, 2009

mas klu untuk automaticnya gimana ya, tanpa harus mnegklik page itu

admin said

on March 8, 2009

Oke saya update deh scriptnya agar bisa diberi animasi dan berpindah-pindah slideshow otomatis. Terima kasih atas masukannya.

oyi kresnamurti said

on March 16, 2009

thanks tip & sourcenya.. amat membantu.

david said

on March 21, 2009

kalo di wordpress pakai hosting bisa nggak…kalo bisa di mana letaknya…di plugin or di mana

apis said

on March 30, 2009

makasih om

away said

on April 2, 2009

apa kabar neh?
keren deh tutorialnya

heroik said

on April 4, 2009

Kalo dihubungkan dengan sql gimana caranya??

tamtam said

on April 6, 2009

good tutorials

klo buat berita terkait itu gimana ya?

tin said

on April 26, 2009

tiap file itu dipisah, atau disatukan di dalam 1 html?
terimakasih

admin said

on April 27, 2009

untuk kasus di artikel ini semua slide ada di 1 halaman html

yanto said

on May 7, 2009

bagaimana cara mengambil data lewat database pak?…thx…mohon kasih conto,,thx

admin said

on May 7, 2009

sudah saya buatkan sebelumnya mas. coba lihat lagi di akhir-akhir artikel ini.
ato lebih cepatnya menuju link ini http://downloads.chandrajatnika.com/Slideshow_Dinamis.pdf

tomi said

on May 9, 2009

artikelnya keren…
ada YM?

yanto said

on May 11, 2009

pak…..kenapa isi dari tabelnya tidak muncul yah pak…salah dimana yah…thx

ropiee said

on May 11, 2009

ok pak…dah bisa…bagus sekali..thx

yanto said

on May 12, 2009

pak…kalo divcontentnya dalam beberapa column gimana yah pak..thx

admin said

on May 12, 2009

ya gampang aja di dalem div kmu kasih aja table, klo kurang besar div-nya kmu ubah lebar div dari CSS

yanto said

on May 12, 2009

ok pak…dah bisa…..seandainya lebih lanjut lagi pak….kalo judulnya di klik…trus ke buka semua berita….jsaya rubah fieldnya jadi berita_detail, berita_full……jadi kalau judulnya di klik lsg masuk ke berita fullnya…thx..mohon pencerahannya

herman said

on May 13, 2009

Thanks banget atas tutorialnya

Uus Khusni said

on June 3, 2009

Selamat siang.

Perkenalkan nama saya uus. Saya seorang staff IT di salah satu lembaga pemerintah. Saya kebetulan mendownload aplikasi tersebut dan saya akan aplikasin di Web kantor saya bekerja. Web tersebut saya hosting di Indosat dengan spesifikasi server menggunakan IIS, PHP 4.4.8 ketika saya upload aplikasi tersebut tidak berjalan sebagaimana mestinya. Trus saya coba dikomputer saya dengan settingan yang sama dengan server indosat yaitu menggunakan IIS dan PHP 4.4.8 dan berjalan lancar. Saya mohon masukannya Pak.

Terimakasih

hariez said

on June 4, 2009

kok bisa ya…????
heheheheee…
1. trus klo mo mengentikan slide show otomatisnya gmn.
2. disitukan tag href diisi dengan value = javascript:;, kalo g dipake g papakan, hehehee…
3. kayaknya bagus bangeth dech kalo dijadiin slide image galery….
yang link 1,2,3 dst tu diganti thumbnail foto yang udah diresize…
pasti bagus..
4. makasih tutornya..

wai said

on June 7, 2009

keren mas hanks berat

annelies said

on June 17, 2009

Mantap banget.
makaci ya

desta said

on July 22, 2009

Cek..cek..cek…
Ternyata anak BL..
Sy jg anak BL angkatan 05 LOL….

rudi averpix said

on September 12, 2009

mas untuk topik slideshow berita headline dengan database tolong di angkat ke materi donk..soalnya saya lg butuh buat belajar. udah saya utak atik nga mau keluar field yg di database nya…