Full Page Background Slideshow dengan JQuery

Saat sedang baca baca di http://belajarwebdesign.com, saya melihat ada comment yang menanyakan bagaimana membuat full background page slideshow. Saya merasa tertantang untuk membuatnya dan akhirnya saya putuskan untuk membuatnya dan membagi caranya disini.

[related_posts]

Pertama kita akan membuat gambar menjadi full page, sebagian CSS saya ambil dari tutorial membuat gambar full background page.

HTML Markup

<html>
<head>
    <title>Full Page Slideshow</title>
</head>
<body>

    <div id="bg-slideshow">
        <img src="images/1.jpg" alt="background" />
        <!-- Gambar yang lain akan dimasukkan kesini dengan bantuan dari jquery -->
    </div>

    <div id="wrapper">
        <!-- Disini di isi oleh content -->
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</body>
</html>

Kode CSS

body {
    margin: 0;
    padding: 0;
}
#bg-slideshow {
    position:fixed;
    top:0
}
#bg-slideshow img{
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:1;
    left:0;
    top:0
}
#wrapper {
    width:450px;
    margin:70px auto 0 auto;
    padding:20px;
    position:relative;
    z-index:5;
    -webkit-box-shadow:0 0 0 15px rgba(255,255,255,.3);
    -moz-box-shadow:0 0 0 15px rgba(255,255,255,.3);
    box-shadow:0 0 0 15px rgba(255,255,255,.3)
}

Seperti yang telah di jelaskan pada tutorial gambar full background page, gambar akan menyesuaikan ukuran tinggi dan lebar sesuai dengan monitor yang digunakan oleh user. Pada div #bg-slideshow saya hanya memasukkan satu buah gambar saja, cara ini dilakukan agar gambar tetap dapat terlihat meskipun javascript tidak berjalan pada browser milik user. Jangan lupa masukkan skrip jquery-nya.

Sedikit penjelasan mengapa saya meyimpan tag script di bawah dan mengapa saya menggunakan service dari google untuk meng-include jquery ke html. Tag script di simpan di bawah agar website sudah dapat dibaca walaupun javascript masih dalam proses load. Jika disimpan di atas, halaman akan menunggu javascript load sampai selesai baru halaman akan muncul.

Baca Juga:  Free Photoshop Action untuk Layout Grid Bootstrap

Saya menggunakan service dari google karena google akan menyimpan cache jquery di komputer kita, jadi jika ada website yang sudah kita buka dan website itu menggunakan service ajax library dari google, maka proses load jquery akan lebih cepat.

Kode Javascript

$(document).ready(function(){

    // Kosongkan img yang berada di dalam div #bg-slideshow
    var $slide = $("#bg-slideshow");
    $slide.empty(); 

    // Buat array yang berisi letak gambar - gambar yang akan dijadikan
    // slideshow. Lalu append gambar gambar tersebut di dalam div #bg-slideshow
    var bg_img = new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.png');
    for (var i=0; i < bg_img.length; i++) {
        imgTemplate = "<img src="" + bg_img[i] + "" alt="image" />";
        $("#bg-slideshow").append(imgTemplate);
    }

    // Bagian Slideshow
    // Sembunyikan gambar selain gambar yang pertama
    $("#bg-slideshow img:gt(0)").hide();

    setInterval(function(){
        // variable visible berisi object gambar yang terlihat
        $visible = $("#bg-slideshow img:visible");
        $visible.fadeOut(1000);

        // jika slideshow berada di akhir gambar, maka munculkan gambar yang pertama
        if( $visible.next('img').length == 0 ) {
            $("#bg-slideshow img:first").fadeIn(1000);
        } else {
            $visible.next('img').fadeIn(1000);
        }
    },5000 //Ganti nilai ini sesuai keinginan);

});

Untuk bagian slideshow, pertama sembunyikan dulu gambar selain gambar yang pertama, pseudo selector :gt singkatan dari greater than. Penjelasan tentang setInterval dapat dibaca di blognya elated. Yup full page background slideshow sudah jadi dapat melihat demonya atau download sourcenya. Jika ada pertanyaan jangan sungkan untuk bertanya dan jika saya ada kesalahan jangan sungkan untuk mengkoreksi.

demonya atau download sourcenya

Komentar

comments

Arif Widipratomo

CSS Ninja, jQuery addict dan seorang pecinta Open Source.

grain storage instagram türk takipçi satın al