Image Slider with Fade Effect Transition

Image-1Image-2Image-3

Slider dengan fade effect transition ini menggunakan sebuah javascript yang sangat sederhana. Slider memuat 3 buah image dengan sebuah background image yang akan terlihat hanya di saat gallery dibuka. Background image ditampilkan dalam bentuk transparan melalui opacity effect. Dibalik background image disertakan juga satu background animasi gif yang berfungsi membuat efek terang-gelap hingga seakan yang memiliki effek terang gelap adalah image dalam slider.

Javascript :

<script type="text/javascript">
//<![CDATA[
function BGS_GR_blor(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    if (opacStart > opacEnd) {
        for (i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    } else if (opacStart < opacEnd) {
        for (i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    }
}
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
function BGS_GR_blor(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    changeOpac(0, imageid);
    document.getElementById(imageid).src = imagefile;
    for (i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
        timer++;
    }
}
//]]>
</script>

Kode CSS :

span.controllmu{width:60px;display:inline-block;padding:4px 6px;background:#333 url(http://www.abchoes.com/images/textbg.png);color:#f00;margin:0 0 6px 1px;border:2px solid #777;border-right:2px solid #888;text-align:center;}
span.controllmu:hover{background:#900;color:#fff;}

xHTML :

<div style="float:left;background:#333;padding:4px;margin:5px 15px 5px 0;border-radius:4px;">
<a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh3.googleusercontent.com/-9w_Fiv-PJeQ/T20GncsIQgI/AAAAAAAAAfw/33z3Uc0Vwwg/h340/gubhugreyot_cah-ayu-14.jpg',500)"><span class="controllmu">Image-1</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh5.googleusercontent.com/-8xr4NI5qRSA/T20GlkCNnGI/AAAAAAAAAfo/_dDUGLuVXQc/h340/gubhugreyot_cah-ayu-13.jpg',500)"><span class="controllmu">Image-2</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh6.googleusercontent.com/-lHhUrUcz0ew/T20Gp3gV7WI/AAAAAAAAAf4/zQXIWpv4DQs/h420/gubhugreyot_cah-ayu-11.jpg',500)"><span class="controllmu">Image-3</span></a>
<div id="pics" style="background:url(https://lh4.googleusercontent.com/-Stz6oRyVlgA/T2z8v9rMwdI/AAAAAAAAAfg/LWZluvASP-8/h340/anima-80x10.gif);border:4px ridge orange;width:224px;">
<img style="filter:alpha(opacity=70);opacity:0.7;" id="BGS_GR_blor" src="https://lh3.googleusercontent.com/-z4E25hU20KU/T20GrTS8ytI/AAAAAAAAAgI/X9a3-tkr07k/h340/gubhugreyot_cah-ayu-10.jpg"/>
</div>
</div>

Cara membuat :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy javascript dan letakkan di bawah ]]></b:skin>
7. Copy kode CSS dan letakkan di atas ]]></b:skin>
8. Klik "Simpan Template (Save Template)".
9. Gunakan xHTML di box posting atau "Add a Gadget | HTML/Javascript".

Keterangan/Catatan :

1. Gunakan image dengan ukuran sama. Lebar image 224px.
2. Jika ingin merubah ukuran image, rubah pula lebar image pada xHTML:
   width:224px;
3. Posisi image slider dapat diatur dengan merubah nilai margin pada xHTML :
   margin:5px 15px 5px 0;

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «