.jpg)
Deskripsi gambar dari slider ini berada di sebelah kanan gambar. Deskripsi berfungsi untuk menyampaikan informasi sekaligus memuat link yang berkaitan dengan gambar/image yang ditampilkan. Teks deskripsi gambar harus dibuat seminimal mungkin (seperlunya saja) karena daya tampung ruang yang memang sangat kecil. Anda bisa memasukkan link untuk deskripsi/penjelasan yang lebih detail sehingga pembaca akan terpuaskan.
Keterangan/Catatan:
Agar proses pembuatan berjalan lancar, bagi yang masih dalam tahap belajar silahkan buka Special Tutorials di menu sebelah kiri.
Jika DEMO-1 gagal dibuka silahkan coba DEMO-2:
Update » Senen WAGE, Maret, 26, 2012
Keterangan/Catatan:
- Kecepatan slider dapat diatur dengan melakukan perubahan pada javascript (intervalObject --> countDown, 400: semakin besar semakin lama/lambat).
- Anda dapat mengaturnya juga di var totalSec.
- Untuk membuatnya lakukan pengamanan template terlebih dahulu. Caranya lihat di sini.
- Setelah selesai mengamankan template lanjutkan dengan menyimpan KODE CSS di atas KODE ]]></b:skin>
- Simpan JQuery.1.3.2.min.js dan javascript di bawah KODE <head> secara berurutan.
- xHTML digunakan dibagian body atau di ruang posting.
Agar proses pembuatan berjalan lancar, bagi yang masih dalam tahap belajar silahkan buka Special Tutorials di menu sebelah kiri.
Jika DEMO-1 gagal dibuka silahkan coba DEMO-2:
Kode CSS - JQuery Image Slider with Description :
#featurelistarea{ /*box utama/terluar */
padding: 10px 10px 14px 10px;
margin:5px;
height:285px;
width:690px; /*bisa diganti dengan with:auto; */
}
#featuremainpic{ /* box gambar */
position:relative;
float: left;
width:348px;
height:288px;
border: 1px solid black;
overflow: hidden;
}
.featurepic{ /*image*/
display:none;
background:#996600;
width:320px;
height:260px;
border:4px solid #660000;
border-radius:15px; /* border corners */
padding:8px;
margin:2px;
}
#featurepic0{ /*opening image*/
display:block;
height: 260px; /*penting: sesuai lebar iamge */
}
#featurelistheader{
width:339px; /*box judul kanan atas: h1 */
height:38px;
}
#featurelistheader h1{
margin: 0px;
background: url(https://sites.google.com/site/gubhugreyotprojects/jquery/image-slider-w-description/images/bgRedBlackV32H7.gif);
font-family:Verdana /*Comic Sans MS*/;
font-size:16px;
font-weight:700;
height:34px;
padding:5px 10px 0 10px;
}
#featurelistheader a{ /* header link */
text-decoration:none;
border-bottom:1px dotted #999;
color:#999900;
}
#featurelistheader a:hover{ /*header link hover */
color:white;
background:black;
padding:2px 6px;
}
#featurelistbox{
position:relative;
float:left;
}
#featurelist{ /* boks teks */
position:relative;
border:1px solid #666;
border-top:none;
border-left:none;
height: 251px;
line-height:16px;
z-index:4000;
}
#feature4{
position:relative;
width :333px;
border-top:1px dotted yellow;
padding: 10px 0px 0px 6px;
}
.feature{ /* boks teks kecil (teks/gambar) */
position:relative;
width: 333px;
border-top:1px dotted yellow;
padding: 4px 0px 4px 6px;
cursor:pointer;
}
.feature a{
font-size:11px;
font-family:Arial;
font-weight:bold;
color:red;
text-decoration:none;
}
.featureon{
background-color:#000;
opacity:0.8;
filter:alpha(opacity=80);
}
.featureon:hover{
background-color:#000;
opacity:1.0;
filter:alpha(opacity=100);
}
#featurelist{ margin:0px; font-size:10px; font-family:Arial; background: #003366; line-height:14px;}
#featurelist a{padding-left:13px; font-weight:bold; color:green;text-decoration:none;}
#featurelist a:link{color:orange; }
#featurelist a:active{color:#00CCFF;}
#featurelist a:visited{color:#fff;}
#featurelist a:hover{color:#66FFFF;}
#featurelist .Title{padding-left:7px;text-transform:uppercase;text-decoration:none;}
#featurelist .Title:link{color:#999;}
#featurelist .Title:active{color:yellow;}
#featurelist .Title:visited{color:#fff;}
#featurelist .Title:hover{color: #fff;}
#featurelist .SubTitle{font-size:11px;padding-left:7px;font-weight:normal;text-transform:none; text-decoration:none;}
#featurelist .SubTitle:link{ color:#999;}
#featurelist .SubTitle:active{ color:yellow;}
#featurelist .SubTitle:visited{ color:#666;}
#featurelist .SubTitle:hover{ color:#fff;}
#featurelist .RedBullet img{padding:0 10px 0 40px;}
#featurelist .RedBullet{text-decoration:none; padding-left:8px;}
#featurelist .RedLink:link{color:#cc0000;font-weight: bold; font-size: 12px;}
#featurelist .RedLink:active{color:#fff;}
#featurelist .RedLink:visited{color:#666;}
#featurelist .RedLink:hover{color:yellow; text-decoration:underline;}jquery.1.3.2.min.js :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Javascript - JQuery Image Slider with Description :
<script type="text/javascript"> //<![CDATA[ jQuery(document).ready(function () { intervalObject = setInterval(countDown, 400); jQuery("#featurelist .feature").each( function (IntIndex) { jQuery(this).hover(featureOn, featureOff); function featureOn() { jQuery('.feature').removeClass("featureon"); jQuery(this).addClass("featureon"); jQuery('.featurepic').hide(); jQuery('#featurepic' + IntIndex).fadeIn("fast"); pause(); } function featureOff() { play(); } }); }); var totalSec = 10; var intervalObject; var isPlaying = true; function featurePlay() {} function play() { if (isPlaying == false) { isPlaying = true; intervalObject = setInterval(countDown, 400); } } /* Control of the play/pause */ function pause() { if (isPlaying == true) { isPlaying = false; clearInterval(intervalObject); totalSec = 10; } } function countDown() { if (totalSec < 0) { totalSec = 10; var currentDiv = jQuery('#featurelist .featureon').attr('id'); var count = currentDiv.charAt(7); count++; if (count > 3) { count = 0; } else {} jQuery('.feature').removeClass("featureon"); jQuery('#feature' + count).addClass("featureon"); jQuery('.featurepic').hide(); jQuery('#featurepic' + count).fadeIn("fast"); } else { totalSec--; } } //]]> </script>
xHTML - JQuery Image Slider with Description :
<div id="featurelistarea" style="background: #3366CC;"> <div id="featuremainpic"> <a href="Link-Image1"><img src="Image1.jpg" id="featurepic0" class="featurepic"/></a> <a href="Link-Image2"><img src="Image2.jpg" id="featurepic1" class="featurepic"/></a> <a href="Link-Image3"><img src="Image3.jpg" id="featurepic2" class="featurepic"/></a> <a href="Link-Image4"><img src="Image4.jpg" id="featurepic3" class="featurepic"/></a> </div> <div id="featurelistbox"> <div id="featurelistheader"> <h1><a href="Link-Judul/Nama Boks">Nama/Judul boks</a></h1> </div> <div id="featurelist"> <div id="feature0" class="feature featureon" ><a href='URL-1' class='Title' target="_blank" title='Teks Title-1'>Judul Deskripsi-1<br><span class="SubTitle">Tulis teks deskripsi-1 di sini !</span></a><span><a href="Link Ekstra-1">Teks Ekstra-1</a></span> </div> <div id="feature1" class="feature"><a href='URL-2' class='Title' target="_blank" title='Teks Title-2'>Judul Deskripsi-2<br><span class="SubTitle">Tulis teks deskripsi-2 di sini !</span></a><span><a href="Link Ekstra-2">Teks Ekstra-2</a></span> </div> <div id="feature2" class="feature"><a href='URL-3' class='Title' target="_blank" title='Teks Title-3'>Judul Deskripsi-3<br><span class="SubTitle">Tulis teks deskripsi-3 di sini !</span></a><span><a href="Link Ekstra-3">Teks Ekstra-3</a></span> </div> <div id="feature3" class="feature"><a href='URL-4' class='Title' target="_blank" title='Teks Title-4'>Judul Deskripsi-4<br><span class="SubTitle">Tulis teks deskripsi-4 di sini !</span></a><span><a href="Link Ekstra-4">Teks Ekstra-4</a></span> </div> <div id="feature4"><img src="https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/jquery/image-slider-w-description/images/CalendarAnima.gif" border="0"/><a class="RedLink" href="Link Bawah-1" target="_blank" >Nama Link Bawah-1</a><img src="https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/jquery/image-slider-w-description/images/NewPostAnima.gif" border="0"/><a class="RedLink" href="Link Bawah-2" target="_self" >Nama Link Bawah-2</a> </div> </div> </div> <div class="clear"></div> </div>
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:
Update » Senen WAGE, Maret, 26, 2012
» Happy Blogging - gubhugreyot «
silahkan tulis sebuah komentar!
gubhug reyot