TUTORIAL

Cara Membuat Overlay Gambar Dengan JQuery

シックス , TUTORIAL
0
6418

jQuery merupakan suatu framework (library) javascript yang menekankan interaksi antara javascript dan HTML, atau bisa disebut juga sebagai cara baru dalam menuliskan kode javascript. jQuery akan mempercepat dan meringkaskan library javascript sehingga dengan menggunakan jQuery kita dapat mempercepat perpindahan dokumen HTML, penanganan event (event handling), pembuatan animasi didalam web sehingga web kita tampak seperti flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat. jQuery merupakan aplikasi yang Open Source dan bebas di publikasikan oleh siapapun. Ukurannya juga cukup kecil yaitu sebesar 56 KB (compressed) sehingga menggunakan jQuery menjadi jauh lebih cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript Konvensional.

Jquery adalah satu framewok javascript yang mendukung pluggin dengan sangat mudah. Sehingga banyak kita dapat dengan mudah men jumpai plugin-plugin yang berada diinternet. Contoh plugin yang terkenal adalah plugin yang dikembangan oleh jquery.tools. Disini kita akan memakai jquery.tools untuk membuat contoh overlay sederhana. Saya akan membuat overlay sebuah gambar ketika gambar di klik maka gambar itu akan menunjukkan efek dalam tampilan membesar seperti gambar dibawah :

Untuk membuatnya kita harus membuat CSS terlebih dahulu Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih untuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties} Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.


 /* style untuk id photos */
    #photos {
	    text-align:center;
    }

    #photos img {
	   cursor:pointer;
	   margin:0 5px;
	   background-color:#fff;
	   border:1px solid #ccc;
	   padding:2px;
	   -moz-border-radius:4px;
	   -webkit-border-radius:4px;
    }

    /* style untuk elemen didalam overlay */
    .details {
	    position:absolute;
       top:1px;
	    right:15px;
	    font-size:11px;
	    color:#fff;
	    width:190px;
    }

    .details h3 {
	    color:#aba;
	    font-size:15px;
    }


/* the overlayed element */
.simple_overlay {	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	width:500px;	
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(img/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

	/* end overlay styling */

body {
	padding:150px 50px;
	font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
} 

Kemudian kita akan membuat file dengan nama overlay.html. Diawal script kita akan menyisipkan CSS yang tadi kita buat dan tidak lupa dengan Jquery tool yang kita download.



<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/overlay-basic.css">
    <script type="text/javascript" src="jquery.tools.min.js"></script>

    <script type="text/javascript"> 
      $(document).ready(function(){
          $("img[rel]").overlay();
	   });
	 </script>	
  </head>

 

Tambahkan script dibawah ini di bagian content html untuk mendiskripsikan script dari javascript, yang kita akan memanggil fungsi dari library file JQuery.



<body>
    <!-- elemen foto -->
    <div id="photos">
	    <img src="images/sixghakreasi_s.jpg" rel="#mies1">
	    <img src="images/sixgha_s.jpg" rel="#mies2">
    </div>

    <!-- overlays -->
    <div class="simple_overlay" id="mies1"><div class="close"></div>
	  <img src="images/sixghakreasi.jpg">

	  <div class="details">
		   <h3>sixghakreasi.com</h3><br />
		   <p>sixghakreasi.com adalah tempat berbagi ilmu web design dan web program 
        kami juga melayani jasa pembuatan website maupun toko online.</p> 
        <p>sixghakreasi.com adalah tempat berbagi ilmu web design dan web program 
        kami juga melayani jasa pembuatan website maupun toko online.</p> 
	  </div>
    </div>

    <div class="simple_overlay" id="mies2"><div class="close"></div>
	   <img src="images/sixgha.jpg">
	 
      <div class="details">
		   <h3>sixghakreasi.com</h3><br />
        <p>sixghakreasi.com adalah tempat berbagi ilmu web design dan web program 
        kami juga melayani jasa pembuatan website maupun toko online.</p> 
        <p>sixghakreasi.com adalah tempat berbagi ilmu web design dan web program 
        kami juga melayani jasa pembuatan website maupun toko online.</p> 
      </div>
    </div>
  </body>
</html>

Untuk struktur filenya yang tadi kita buat dapat dilihat dibawah :

 

Berikut kami share link download Sourcecodenya :

DOWNLOAD

0 Comments

×