Tutorial Membuat Image Slider Web/Blog

Tutorial Membuat Image Slider Web/BlogTrik Membuat Slider Image (Gambar) Pada Web/blog

Tentu saja web/blog lebih terlihat menarik dengan menambahkan animasi, seperti contoh yang akan dibahas di sini adalah membuat dan menambahkan slide image (gambar) pada website / blog. Seperti apa contoh slider image, langsung lihat saja contohnya pada halaman ini. Slider Image yang akan dibuat akan mempunyai beberapa fitur antara lain:1. 2. 3. 4. Slideshow dengan gambar disertai deskripsi singkatnya Tombol Play, Pause, Next, dan Previous. Kecepatan / delay waktu slideshow yang dapat disesuaikan Script yang dapat disesuaikan dengan ukuran gambar yang dipakai

OK langsung saja, begini tahapan pembuatannya. Sebelumnya download dahulu bahannya di halaman ini. Pertama buat dulu css nya seperti di bawah ini: #slider { width: 300px; height: 186px; position: relative; overflow: hidden; } #slider a:link, #slider a:active { color: #FF0; text-decoration: none; } #slider a:hover { color: #F00; } #mask-gallery { overflow: hidden; } #gallery { list-style: none; margin: 0; padding: 0; z-index: 0; width: 900px; overflow: hidden; }

http://www.linggih.com | Tutorial Membuat Image Slider Web/Blog

1

Tutorial Membuat Image Slider Web/Blog#gallery li { float: left; } #mask-excerpt { position: absolute; top: 0; left: 0; z-index: 500px; width: 100px; overflow: hidden; } #excerpt { filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; list-style: none; margin: 0; padding: 0; z-index: 10; position: absolute; top: 0; left: 0; width: 100px; background-color: #000; overflow: hidden; font-family: arial; font-size: 10px; color: #fff; } #excerpt li { padding: 5px; }

Ganti ukuran gambar sesuai dengan gambar anda. Selanjutnya copy dan pastekan kode script di bawah di atas atau di bawah kode css yang baru anda buat. $(document).ready(function() { var speed = 5000; $('#mask-gallery, #gallery li').width($('#slider').width()); $('#gallery').width($('#slider').width() * $('#gallery li').length); $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height()); var run = setInterval('newsscoller(0)', speed); $('#gallery li:first, #excerpt li:first').addClass('selected');

http://www.linggih.com | Tutorial Membuat Image Slider Web/Blog

2

Tutorial Membuat Image Slider Web/Blog$('#btn-pause').click(function () { clearInterval(run); return false; }); $('#btn-play').click(function () { run = setInterval('newsscoller(0)', speed); return false; }); $('#btn-next').click(function () { newsscoller(0); return false; }); $('#btn-prev').click(function () { newsscoller(1); return false; }); $('#slider').hover( function() { clearInterval(run); }, function() { run = setInterval('newsscoller(0)', speed); } ); }); function newsscoller(prev) { var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first'); var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first'); if (prev) { var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last'); var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last'); } else { var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first'); var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first'); } $('#excerpt li, #gallery li').removeClass('selected'); next_image.addClass('selected'); next_excerpt.addClass('selected'); $('#mask-gallery').scrollTo(next_image, 800); $('#mask-excerpt').scrollTo(next_excerpt, 800);

http://www.linggih.com | Tutorial Membuat Image Slider Web/Blog

3

Tutorial Membuat Image Slider Web/Blog

}

Var Speed= 5000, yang berarti mengatur delay untuk setiap pergantian gambar (semakin kecil nilainya maka semakin cepat delay pergantian gambarnya). "$(#mask-gallery).scrollTo(next_image, 800)" dan "$(#maskexcerpt).scrollTo(next_excerpt, 800)", nilai 800 mengatur kecepatan perpindahan slide (semakin kecil nilainya maka akan semakin cepat). Selanjutnya buat konten yang mana harus diisikan antara kode sampai dengan . Contohnya seperti di bawah:

Isikan diskripsi singkat untuk gambar slideshow yang pertama

Selanjutnya bagian ini untuk deskripsi singkat gambar yang kedua Dan ini merupakan deskripsi singkat untuk gambar yang ketiga next

Nah sekarang link kan script file "jquery.scrollTo" dan "jquery-1.3.1.min" dalam folder "js" yang baru saja anda download diantara kode sampai . Cara link nya contohnya seperti di bawah ini:

Untuk pengguna blogger src= gantikan dengan alamat url dimana script file tersebut anda upload. Jika anda mempunyai account gmail, upload file anda di google sites. Lihat hasilnya di sini.Article Source:

http://linggih.com/internet/blog/webblog -accessories/image-slider-webblog/http://www.linggih.com | Tutorial Membuat Image Slider Web/Blog 4