Sunday, June 3, 2012

jQuery Overlay Sederhana

Posted by dav On 10:52 PM
Bismillah. Disela-sela kesibukan dunia teknik, Alhamdulillah masih sempat menulis artikel sederhana ini. Artikel kali ini akan membahas cara membuat efek overlay sederhana dengan jQuery. Namun tidak akan dijelaskan secara detail karena sepertinya terlalu panjang jika harus ditulis detail. Pada script yang disertakan diberikan penjelasan-penjelasan penting walau tidak detail, jadi silahkan dianalisis sendiri. Fungsi script overlay ini sebenarnya hanya secuil kode yang tersedia pada efek-efek overlay hebat (misal; colorbox, nivozoom, prettyPhoto, dll). Maka dari itu jangan membandingkan dengan plugin-plugin tersebut.

Deskripsi

Ketika kita klik pada salah satu gambar yang memiliki keterangan tombol perbesar (icon +) maka gambar akan ditampilkan dengan efek luntur (fade) dalam ukuran besar beserta keterangan, sedangkan seluruh halaman ditutup dengan latar hitam transparan. Ketika tombol tutup (icon X) di klik dan atau latar hitam transparan diklik dan atau tombol ESC pada keyboard di tekan maka gambar disembunyikan dengan efek luntur (fade). Latar hitam transparan berfungsi untuk memfokus gambar dan artikel yang di tampilkan pada layar. Layar hitam transparan yang menutupi seluruh halaman sering disebut overlay. Untuk memahami bahasan berikutnya sebaiknya anda unduh terlebih dahulu file demo.

Skenario HTML

Skenario HTML dibawah ini terdiri dari 1 kontener, kontener ini berisi 3 area utama. Perhatikan kode HTML dibawah ini:
<div class="feat-overlay">

 <!-- Area Item 1-->
 <div class="item">
  <a class="bingkai" rel="overlay-1" href="#"><span class="perbesar"></span></a>
  <div class="thumb">
   <img height="147" border="0" width="217" alt="" src="gbr/banjarsari-s.jpg">
  </div>
  <h4>Judul Item</h4>
  <p>Keterangan Gambar Pendek</p>
 </div>
 
 <!-- Area Overlay Tersembunyi 1-->
 <div style="display: none;" id="overlay-1">
  <img height="383" border="0" width="585" alt="" alt="" src="gbr/banjarsari.jpg">
  <h5>Judul Overlay</h5>
  <p>Keterangan Gambar Panjang</p>
 </div>
 
 <!-- Area Item 2, 3, 4, dst -->
 <!-- Area Overlay Tersembunyi 2, 3, 4, dst -->
 
 <!-- Area Untuk Menampilkan Overlay Tersembunyi -->
 <a href="#" id="latar"></a>
 <div class="info-overlay">
  <a href="#" class="tutup"></a>
  <div class="txt">
   <h5>loading...</h5>
  </div>
 </div>

</div>
  • feat-overlay adalah kontener dari seluruh overlay yang akan dibuat.
  • item merupakan wadah yang berisi gambar thumbnail dan penggalan keterangan. Jumlah wadah item ini tidak terbatas, anda bisa membuatnya sebanyak mungkin, namun hal yang terpenting adalah tag rel. Tag rel tidak boleh sama, harus unik. Misal disana tertulis overlay-1 maka berikutnya anda bisa menggunakan overlay-2, overlay-3 dan seterusnya.
  • overlay-1 adalah wadah dari area informasi lengkap overlay yang disembunyikan pada saat halaman di-load. Didalamnya berisi gambar dalam ukuran besar dan informasi secara lengkap. Tag id overlay-1 juga harus unik, karena ini terkait langsung dengan tag rel item. Misal, pada item tertulis rel="overlay-1" maka informasi lengkapnya tersedia pada id="overlay-1", maka yang berikutnya ditulis; rel="overlay-2" (pada item) dan id="overlay=2" (pada area informasi lengkap) dan seterusnya.
  • Informasi lengkap yang tersimpan pada id="overlay-1" dan seterusnya, akan ditampilkan saat gambar di klik pada satu area saja, yaitu area info-overlay. Area info-overlay adalah lokasi untuk menampilkan semua informasi lengkap (gambar besar dan keterengan lengkap) overlay-1, overlay-2 dan seterusnya. Namun wadah ini hanya cuku ditulis satu kali saja.

Skenario CSS

Kode CSS dibawah ini hanya terdiri dari 2 bagian utama, yaitu bagian list item dan bagian overlay. List item berfungsi untuk mengatur bagian-bagian item (gambar thumbnail, judul, teks pendek dan tombol perbesar), informasi lengkap (frame, gambar besar, judul dan teks lengkap). Sedangkan bagian overlay berisi tentang pengaturan latar (warna, area dan opacity), informasi lengkap (frame, teks lengkap, gambar besar dan tombol tutup). Secara detail silahkan dipelajari sendiri (ma'af kepanjangan jika dijabarkan).
/* List Item */
.feat-overlay {
 width: 725px;
 margin: 0 auto;
}
.feat-overlay .item {
 position: relative;
 float: left;
 width: 249px;
 padding-bottom: 15px;
}
.feat-overlay .item.last {
 width: 225px;
}
.feat-overlay span.perbesar {
 background: transparent url(../img/enlarge.png) no-repeat top left;
 position: absolute;
 z-index: 3;
 top: 133px;
 left: 201px;
 width: 22px;
 height: 22px;
 z-index: 8;
}
.feat-overlay a.perbesar {
 background: transparent url(../img/enlarge.png) no-repeat top left;
 position: absolute;
 z-index: 3;
 top: 133px;
 left: 201px;
 width: 22px;
 height: 22px;
 z-index: 8;
}
.feat-overlay a:hover span.perbesar, .feat-overlay a.perbesar:hover {
 background-position: 0 -26px;
}
.feat-overlay .item .thumb {
 width: 217px;
 height: 147px;
 overflow: hidden;
 margin-bottom: 9px;
 position: relative;
}
.feat-overlay .item .bingkai {
 background: transparent url(../img/bg-item.png) no-repeat top left;
 position: absolute;
 z-index: 2;
 top: 0;
 left: 0;
 width: 217px;
 height: 147px;
}
.feat-overlay .item h4 {
 width: 213px;
 font-size: 14px;
 line-height: 16px;
 font-weight: bold;
 padding: 0 2px 4px 0;
}
.feat-overlay .item p {
 line-height: 16px;
 width: 213px;
 padding-left: 2px;
}
.clear {
 clear: both;
 font-size: 1px;
 line-height: 0;
 margin: 0;
 padding: 0;
}

/* Overlay */
#latar {
 position: fixed;
 z-index: 15;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: black;
 opacity: 0;
 visibility: hidden;
}
.info-overlay {
 background: transparent url(../img/bg-overlay.png) no-repeat top left;
 z-index: 20;
 position: fixed;
 margin: auto;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 width: 872px;
 height: 435px;
 opacity: 0;
 visibility: hidden;
 *position: absolute;
 *zoom: 1;
 *visibility: visible;
 *display: none;
}
.info-overlay .overlay-img {
 float: left;
 width: 585px;
 height: 383px;
 margin: 26px 20px 0 26px;
 *display: inline;
 *zoom: 1;
 *position: relative;
}
.info-overlay .txt {
 position: relative;
 z-index: 1;
}
.info-overlay .txt img {
 float: left;
 width: 585px;
 height: 383px;
 margin: 26px 20px 0 26px;
 *display: inline;
 *zoom: 1;
 *position: relative;
}
.info-overlay .txt h5 {
 font: 14px/16px Helvetica, Arial, sans-serif;
 color: #404040;
 width: 210px;
 margin: 34px 0 6px 0;
 font-weight: bold;
 float: left;
}
.info-overlay .txt p {
 width: 210px;
 line-height: 16px;
 float: left;
}
.info-overlay a.tutup {
 background: transparent url(../img/close.png) no-repeat top left;
 position: absolute;
 z-index: 1;
 top: 1px;
 right: 0px;
 width: 29px;
 height: 30px;
 z-index: 2;
}
.info-overlay a.tutup:hover {
 background-position: 0 -32px;
}
* html #latar {
 position: absolute;
 height: expression(document.body.offsetHeight);
 filter: alpha(opacity=0);
}

Skenario jQuery

Script dibawah ini digunakan untuk mengatur fungsi overlay. Ketika gambar di klik $(.item a).click maka overlay diaktifkan dan informasi lengkap juga ditampilkan. Ketika #latar, tombol tutup di klik dan atau tombol ESC di tekan maka overlay disembunyikan. Begitulah garis besar fungsi script jQuerynya. Mengenai secara lengkap, silahkan jabarkan sendiri... (ge males...)
$(document).ready(function(){
 
 var bukaOverlay = false;
 
 // tampilkan overlay
 $('.item a').each(function(){
  $(this).click(function(){
   bukaOverlay = true;
   
   if ($.browser.msie) {
    // menampilkan overlay dengan efek luntur (fade)
    var posisi = $('.feat-overlay').offset();
    $('.info-overlay').css('left', (posisi.left+44) + 'px');
    $('.info-overlay').css('top', (posisi.top-10) + 'px');
    $('#latar').css('visibility', 'visible');
    $('#latar').animate({ opacity:"0.8" }, 200, function() { 
     $('.info-overlay').css('display', 'block');
    });
   } else {
    $('#latar').css('visibility', 'visible');
    $('.info-overlay').css('visibility', 'visible');
    $('#latar').animate({ opacity:"0.8" }, 100, function() { 
     $('.info-overlay').animate( { opacity:"1" }, { queue:false, duration:200 } )
    });
   }
   
   // ubah isi overlay jika tersedia
   if($( '#' + $(this).attr('rel') ) != null){
    $('.txt').html( $( '#' + $(this).attr('rel') ).html() );
   }
   return false;
  });
 });
 
 // tutup overlay dengan event klik dan tombol ESC
 $('#latar').click(function(e) {
  e.preventDefault();
  tutupOverlay();
 });
 
 $('.info-overlay .tutup').click(function(e) {
  e.preventDefault();
  tutupOverlay();
 });
 
 $(document).keyup(function(event) {
  if ((event.keyCode == 27) && (bukaOverlay)) {
   tutupOverlay();
  }
 });
 
});

// membuat fungsi tutup overlay
function tutupOverlay() {
 bukaOverlay = false;
 if ($.browser.msie) {
  $('.info-overlay').css('display', 'none');
  $('#latar').animate({ opacity:"0" }, 200, function() { 
   $('#latar').css('visibility', 'hidden');
  });
 } else {
  $('.info-overlay').animate({ opacity:"0" }, 200, function() { 
   $('#latar').animate({ opacity:"0" }, 100, function() { 
    $('#latar').css('visibility', 'hidden');
    $('.info-overlay').css('visibility', 'hidden');
   });
  });
 }
}

Kesimpulan

jQuery overlay sederhana (jQuery Simple Overlay) ini memang sangat sederhana, karena bukanlah sebuah plugin yang kompleks. Dan anda bisa saja kemudian menyusun ulang script diatas untuk dibuat plugin yang lebih sederhana. Mengenai fungsi-fungsinya mari kita diskusikan pada kotak komentar atau pada fan page Blogger Tune-Up. Penggunaan overlay diatas bisa disesuaikan dengan keperluan anda, bisa untuk halaman depan blog atau halaman portofolio. Selanjutnya silahkan berkreasi dengan script diatas, anda bebas memodifikasinya sesuai dengan kebutuhan. Selamat mencoba, belajar dan obrak-abrik script. Semoga berhasil. Akhirnya kata Happy Blogging :)

Popular Posts

Blog Archive