Banyak
plugin jQuery yang menawarkan animasi slideshow pada gambar atau dalam kasus
ini adalah gambar headline berita, diantaranya Jcarousel, easySlider,
NivoSlider dan masih banyak lagi. Tapi ada juga yang buatan indonesia yaitu
headline.js yang dibuat oleh Chandra Jatnika (http://chandrajatnika.com)
dan ternyata banyak diminati para pengembang web, buktinya banyak website lokal
yang menggunakannya.
Untuk saat ini, kita akan membuat
headline.js dari chandra jatnika. Perhatikan langkah – langkah dibawah ini :
1. Silahkan download file headline.js
disini dan jquery-1.11.2.min.js disini gambar disini.
2. Setelah mendownload kedua file tersebut,
simpanlah dalam 1 folder, contoh jika anda menggunakan appserv biasanya tempat
penyimpanan terletak dalam folder appserv – www – “nama folder anda”, jika
menggunakan xampp simpan dalam folder htdocs dan buat nama folder anda.
3. Ketiklah skrip css di bawah ini, buat
nama file css “head.css” dan simpan dalam folder yang anda buat tadi.
#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 berada dalam kotak */
border:
1px solid #000;
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 #000;
width:
640px;
height:
300px;
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
}
|
4. Setelah membuat file head.css buatlah
file “headnews.php” skrip untuk headnews.php adalah sebagai berikut :
<html>
<head>
<link rel="stylesheet" type="text/css"
href="head.css">
<script
src="jquery-1.11.2.min.js"></script>
<script
src="headline.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//
untuk permulaan, tampilkan content nomor 1 '#slideAwal'
bukaContent($('#slideAwal'),'div1');
});
</script>
</head>
<body>
<div id="divTrigger">
<a href="javascript:;" onClick="bukaContent(this,'div1')"
id="slideAwal">1</a>
<a href="javascript:;"
onClick="bukaContent(this,'div2')">2</a>
<a href="javascript:;"
onClick="bukaContent(this,'div3')">3</a>
<a href="javascript:;"
onClick="bukaContent(this,'div4')">4</a>
</div>
<div id="divContent">
<div id="div1">
<span
class="title">Skyfall: James Bond 007</span>
<img
src="images/skyfall.jpg" width="180px"
height="180" align="left" />
Setelah operasi di Istanbul berakhir dengan bencana, James Bond hilang
dan diduga telah tewas,
sementara identitas para agen rahasia MI6 yang masih aktif terkuak di
internet ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
</div>
<div id="div2">
<span class="title">Les
Miserable</span>
<img src="images/les.jpg"
align="left" />
Film ini mengisahkan tentang mantan narapidana yang ingin berubah
menjadi orang baik-baik,
namun tak bisa lepas dari bayang-bayang masa lalunya yang gelap ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
</div>
<div id="div3">
<span
class="title">Lincoln</span>
<img
src="images/lincoln.jpg" width="180px"
height="180" align="left" />
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
</div>
<div id="div4">
<span class="title">The
Amazing Spiderman</span>
<img
src="images/spiderman.jpg" width="180px"
height="180" align="left" />
The Amazing Spiderman menceritakan petualangan Peter Parker, seorang
pemuda yang mendapat sebuah
kekuatan luar biasa setelah digigit laba-laba hasil rekayasa genetika
...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
Film ini bercerita tentang bulan-bulan
terakhir dalam hidup Abraham Lincoln,
presiden Amerika Serikat ke-16 yang memiliki misi untuk menghapuskan
perbudakan ...
</div>
</div>
</body>
</html>
|
5.
Setelah selesai, jalankan
menggunakan browser anda “localhost/namafolderanda”. Jika berhasil akan
menampilkan hasil seperti dibawah ini.
Sekian
dan terimakasih
Semoga
bermanfaat
(^_^)
No comments:
Post a Comment