• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tutorial Efek Animasi Visual jQuery untuk Web Desainer - Accordion dan Pergantian Gambar pada Galeri

20‘11
February

noimg.jpg

Artikel ini adalah lanjutan dari beberapa tutorial efek visual yang saya post sebelumnya untuk para web designer. Sebelumnya kita sudah belajar membuat panel geser, cara menghilangkan suatu elemen seperti div dan juga efek transisi perpindahan suatu elemen pada HTML. Sekarang mari kita belajar cara membuat jQuery accordion dan perpindahan gambar pada galeri.

Membuat jQuery Accordion

Secara tidak langsung anda mungkin sudah sering melihat jQuery accordion diterapkan di banyak website, umumnya jQuery accordion ini banyak digunakan untuk mempersingkat tampilan berita/produk dimana kita hanya melihat baris-baris judul berita atau nama produknya saja, tapi ketika judul/nama produk tersebut kita sorot nanti ada sebuah elemen yang geser kebawah berisi ringkasan berita. jQuery accordion ini sangat berguna untuk menghemat space halaman website apalagi kalau website kita memiliki content yang sangat banyak. Saya sendiri pernah menggunakan jQuery accordion ini pada beberapa project yang saya kerjakan, berikut ini adalah contoh sebuah jQuery accordion yang saya buat :

Belajar Membuat Website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id suscipit elit. Nam orci mauris, semper sed gravida id, accumsan quis lectus. In lorem felis Duis nunc... more

Belajar Membuat Website Tanpa Table

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id suscipit elit. Nam orci mauris, semper sed gravida id, accumsan quis lectus. In lorem felis Duis nunc... more

Pengertian CSS dan Cara Penerapan CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id suscipit elit. Nam orci mauris, semper sed gravida id, accumsan quis lectus. In lorem felis Duis nunc... more

Tips dan Trik Membuat jQuery tooltip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id suscipit elit. Nam orci mauris, semper sed gravida id, accumsan quis lectus. In lorem felis Duis nunc... more

Ukuran Bra Julia perez ( Haahahah )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id suscipit elit. Nam orci mauris, semper sed gravida id, accumsan quis lectus. In lorem felis Duis nunc... more

Berikut ini saya perlihatkan script yang di perlukan untuk membuat jQuery accordion:

    $(".news_accordion h3:last").addClass("active");
    $(".news_accordion h3:first").addClass("noborder");
    $(".news_accordion div:not(:last)").hide();
    $(".news_accordion h3").hover(function(){ 
        $(".news_accordion h3").removeClass("active");
        $(this).toggleClass("active");
        $(this).next("div").slideToggle(0).siblings("div:visible").slideUp(250); 
    });

Integrasi coding diatas dengan css dan html

<script type="text/javascript">
$(document).ready(function(){
    $(".news_accordion h3:last").addClass("active");
    $(".news_accordion h3:first").addClass("noborder");
    $(".news_accordion div:not(:last)").hide();
    $(".news_accordion h3").hover(function(){ 
        $(".news_accordion h3").removeClass("active");
        $(this).toggleClass("active");
        $(this).next("div").slideToggle(0).siblings("div:visible").slideUp(250); 
    });
});
</script>
<style type="text/css">
.news_accordion h3 {
    background: #fff url(arrow.gif) no-repeat right -51px;
    height: auto;
    line-height:30px;
    padding-left:5px;
    font-size:14px;
    font-weight:normal;
    border-top: thin solid #cccccc;
    margin:0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
    width:375px;
}
.news_accordion h3.noborder { border-top:none; }
.news_accordion h3.active { background-position: right 5px; background-color:#eee;}
.news_accordion div { height:75px; text-align:left; padding:5px 0 0 5px; width:375px; line-height:20px; font-size:12px; color:#555555; }
.news_accordion div a{ color:#000; text-decoration:none; }
.news_accordion div a:hover{ color:#F30;  }
.news_accordion img { width:65px; height:65px; overflow:hidden; line-height:80px; }
</style>
<div class="news_accordion">
    <h3><a href='#'>Title Berita / Nama Produk 1</a></h3>
    <div>Ringkasan berita<a href="#">more</a></div>
    
    <h3><a href='#'>Title Berita / Nama Produk 2</a></h3>
    <div>Ringkasan berita<a href="#">more</a></div>
    
    <!-- dan seterusnya -->
</div> 

Penjelasan kode jQuery yang saya buat diatas adalah sebagai berikut:

  • baris pertama yaitu $(".news_accordion h3:last").addClass("active"); digunakan untuk menambahkan class CSS active pada h3 yang merubah posisi background tanda panah
  • baris ke dua $(".news_accordion h3:first").addClass("noborder"); digunakan untuk menghilangkan border atas (class="noborder")
  • baris ke ke tiga $(".news_accordion div:not(:last)").hide(); digunakan untuk menyembunyikan div child dari class news_accordion kecuali child yang terakhir div:not(:last)
  • baris selanjutnya diggunakan untuk menghilangkan semua class active dari elemen h3, menambahkan class active pada h3 yang disorot sekaligus menampilkan div dibawahnya dan pada saat yang sama menyembunyikan div dibawah h3 lainya yang masih tampil dengan efek slideUp (geser ke atas)

Membuat Pergantian Gambar pada Galeri

Pada website tradisional apabila kita ingin melakukan pergantian gambar maka kita harus lompat ke halaman lain. Nah jiga anda mungkin punya portofolio yang banyak dalam bentuk gambar dan ingin anda perlihatkan tanpa harus berpindah-pindah halaman, anda bisa membuatnya dengan jQuery seperti dibawah:

Galeri Portofolioku

Large image

Berikut ini adalah script yang di perlukan untuk membuat pergantian gambar diatas dengan jQuery:

	//apabila ingin pada saat di click ganti menjadi $(".imgthumbs a").click(function(){ 
	$(".imgthumbs a").hover(function(){ 
		var largeImage = $(this).attr("href");
		var imgTitle = $(this).attr("title");
		$("#largeImages").attr({ src: largeImage, alt: imgTitle });
		$(".imgTitle").html(imgTitle); 
		return false;
	});

Integrasi coding diatas dengan css dan html adalah sebagai berikut:

<script type="text/javascript">
$(document).ready(function(){
    $(".imgthumbs a").hover(function(){
        var largeImage = $(this).attr("href");
        var imgTitle = $(this).attr("title");
        $("#largeImages").attr({ src: largeImage, alt: imgTitle });
        $(".imgTitle").html(imgTitle); 
        return false;
    });
});
</script>
<style type="text/css">
h2.imgTitle {
    font: bold 190%/100% Arial, Helvetica, sans-serif;
    margin: 0 0 .2em;
}
#largeImages {
    border: solid 1px #ccc;
    width: 460px;
    height: 300px;
    padding: 5px;
}
.imgthumbs img {
    border: solid 1px #ccc;
    width: 100px;
    height: 100px;
    padding: 4px;
    margin-right:8px;
}
.imgthumbs img:hover { border-color: #FF9900; }
</style>
<h2 class="imgTitle">Galeri Portofolioku</h2>
<p><img id="largeImages" src="../images_tutor/tjqai_1.jpg" alt="Large image" /></p>
<p class="imgthumbs">
    <a href="images/wall1.jpg" title="Wallpaper Hitam"><img src="images/thumb_wall1.jpg" /></a>
    <a href="images/wall2.jpg" title="Wallpaper Orange"><img src="images/thumb_wall2.jpg" /></a>
    <a href="images/wall3.jpg" title="Wallpaper Hijau"><img src="images/thumb_wall3.jpg" /></a>
    <a href="images/wall4.jpg" title="Wallpaper Biru"><img src="images/thumb_wall4.jpg" /></a>
</p>

Penjelasan kode jQuery untuk pergantian gambar yang saya buat diatas adalah sebagai berikut:

  • $(".imgthumbs a").hover(function(){ ini adalah deklarasi untuk gambar dengan class imgthumbs pada saat disorot pointer mouse, anda bisa mengganti hover dengan click bila ingin pada saat di klik
  • var largeImage = $(this).attr("href"); adalah pendefinisian variable largeImage dengan nilai yang di ambil dari atribut href imgthumbs
  • var imgTitle = $(this).attr("title"); adalah pendefinisian variable imgTitle dengan nilai yang di ambil dari atribut title imgthumbs
  • $("#largeImages").attr({ src: largeImage, alt: imgTitle }); digunakan untuk menganti arah penunjukan gambar pada id largeImages dengan variable yang telah ditentukan sebelumnya (largeImage)
  • $(".imgTitle").html(imgTitle);digunakan untuk mengganti text yang terdapat pada class imgTitle dengan variable yang telah ditentukan sebelumnya (imgTitle)

Selamat mencoba

Anda juga mungkin suka dengan artikel ini :

  1. Pengantar dan Penggunaan jQuery pada Website
  2. Tutorial membuat Submit Form Email dengan jQuery dan PHP tanpa harus Refresh Halaman Web
  3. Membuat Drop Down Menu Sederhana dengan jQuery
  4. Trik Membuat Animasi Tooltip Balon dengan jQuery
  5. jQuery 2.0 Sudah Resmi Di Luncurkan

Komentar

  • heri wibowo (26 May 2014 08:47:44)

    Aslkm mas...
    mas, utk jquery accordion.... setelah source code yang mas contohkan di atas saya copy-pastekan di wigdet web saya, trs saya publish, kok tampilnya spt berikut ya??? antara title berita dan ringkasan tampil atas bawah (tidak saing geser spt yg mas contohkan). Spt ini mas:
    Title Berita / Nama Produk 1

    Ringkasan beritamore

    Title Berita / Nama Produk 2

    Ringkasan beritamore
    o..iya mas... saya pakai wordpress mas...
    makasih ya mas sblmnya .. mf klo merepotkan...

  • Pemula (14 Mar 2014 08:57:25)

    masih belum ngerti._.

  • cici (02 Aug 2013 02:39:33)

    Saya coba pergantian gambar gallery menggunakan code di atas kok nggak bisa ya?
    apakah image di thumbs sama di large beda sumber? Terima kasih :)

  • edo (25 Jun 2013 07:50:50)

    Mas kok nggak bisa ? saya pakai hover, tapi gambar nggak muncul diatas

  • vist (30 Apr 2013 07:49:44)

    Tolong tutorialnya agar bisa di pasang di blogspot mas..terimakasih

» Muat Komentar Sebelumnya (13 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff