Full Page Background Slideshow dengan JQuery

Template Landing Page untuk Blogspot

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.

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.

Baca Juga:  Menggunakan CSS3 Media Queries untuk Menentukan Target di iPad & iPhone

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

Tags

membuat slideshow dengan css,cara membuat slideshow dengan css,skrip web,ukuran web,cara membuat web menggunakan css,membuat browser dengan java,membuat slider dengan css,belajar jquery slideshow,cara menggunakan css,slideshow css,jquery page slide,membuat slide dengan css,slideshow php css,membuat slideshow css,membuat slideshow dengan jquery,membuat background web,cara membuat slider di website,apa yang dimaksud dengan dropbox,slideshow dengan css,slide

Komentar

comments

Arif Widipratomo

CSS Ninja, jQuery addict dan seorang pecinta Open Source.

grain storage hd porno izle turk porno