JQuery Image Slider with Description

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:

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:

D E M O - 1 D E M O - 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 «

Berbagi Informasi Bisnis, Berita, Tips & Trik, dll