Cara Menggunakan Image Gallery Jquery di Website
Cara Menggunakan Image Gallery Jquery di Website
Image Gallery merupakan salah satu elemen mempercantik sebuah website apapun jenis website anda seperti company profile, toko online, portal dan lainnya.
- Jika website company profile maka image gallery bisa ditempatkan sebagai produk anda, kegiatan perusahaan anda ataupun blog interaktif.
- Jika anda memiliki toko online maka image gallery sangat tepat digunakan untuk produk seperti kategori best seller atau pun new produk.
- Jika anda memiliki Portal atau Website berita maka image gallery bisa digunakan untuk headline, berita gambar atau gallery
Cara Menggunakan Image Gallery Jquery di Website
Ada 2 type image gallery scrollable yang akan kita gunakan, yang pertama dengan preview dan yang ke dua tanpa preview. Untuk 2 type image gallery yang akan kita gunakan tersebut, ada persiapan yang harus anda lakukan yaitu upload file dibawah di server anda:
- scrollable-horizontal.css
- scrollable-buttons.css
- tools.min.js
Anda dapat mendownload file tersebut lengkap dengan coding image gallery di bawah ini
Tanpa penjelasan panjang lebar berikut coding yang diperlukan untuk menggunakan image gallery jquery di website anda adalah sebagai berikut
Image Gallery Scrollable Tanpa Preview
Anda bisa melihat demo nya di bawah ini
Penjelasan Codingnya
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css">
<link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css">
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gulung").scrollable({
circular: true
});
});
</script>
</head>
<body>
<div style="margin:0 auto; width: 634px; height:120px;">
<!-- aksi untuk halaman sebelumnya -->
<a class="prev browse left"></a>
<!-- elemen untuk efek scrollable -->
<div class="scrollable" id="gulung">
<!-- elemen untuk items (gambar) -->
<div class="items">
<!-- foto ke 1 s.d 4 -->
<div>
<img src="images/skyfall_t.jpg">
<img src="images/stolen_t.jpg">
<img src="images/lorax_t.jpg">
<img src="images/spiderman_t.jpg">
</div>
<!-- foto ke 5 s.d 8 -->
<div>
<img src="images/ichi_t.jpg">
<img src="images/les_t.jpg">
<img src="images/jack_t.jpg">
<img src="images/robinhood_t.jpg">
</div>
<!-- foto ke 9 s.d 12 -->
<div>
<img src="images/khan_t.jpg">
<img src="images/kcb_t.jpg">
<img src="images/pemimpi_t.jpg">
<img src="images/confucius_t.jpg">
</div>
</div>
</div>
<!-- aksi untuk halaman berikutnya -->
<a class="next browse right"></a>
</div>
</body>
</html>
Image Gallery Scrollable dengan Preview
Anda bisa melihat demo nya di bawah ini
Penjelasan Codingnya
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css">
<link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css">
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.scrollable").scrollable();
$(".items img").click(function() {
// hilangkan _t dibelakang nama file foto untuk foto yang besar
// misal foto kecil (air_t.jpg) dihilangkan _t untuk foto besar menjadi (air.jpg)
var url = $(this).attr("src").replace("_t", "");
// untuk area gambar besar diberikan efek fade (semi transparan)
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
// load foto
var img = new Image();
img.onload = function() {
wrap.fadeTo("fast", 1);
wrap.find("img").attr("src", url);
};
img.src = url;
}).filter(":first").click();
});
</script>
<style>
/* style untuk image wrapper (preview image yang besar) */
#image_wrap {
width:547px;
margin:15px 0 15px 40px;
padding:15px 0;
text-align:center;
background-color:#efefef;
border:2px solid #fff;
outline:1px solid #ddd;
-moz-ouline-radius:4px;
}
</style>
</head>
<body>
<!-- tempat untuk menampung foto yang besar -->
<div id="image_wrap">
<!-- background untuk foto berupa gambar blank.gif -->
<img src="images/blank.gif" width="276" height="330" />
</div>
<!-- aksi untuk halaman sebelumnya -->
<a class="prev browse left"></a>
<!-- elemen untuk efek scrollable -->
<div class="scrollable">
<!-- elemen untuk items (gambar) -->
<div class="items">
<!-- foto ke 1 s.d 4 -->
<div>
<img src="images/skyfall_t.jpg">
<img src="images/stolen_t.jpg">
<img src="images/lorax_t.jpg">
<img src="images/spiderman_t.jpg">
</div>
<!-- foto ke 5 s.d 8 -->
<div>
<img src="images/ichi_t.jpg">
<img src="images/les_t.jpg">
<img src="images/jack_t.jpg">
<img src="images/robinhood_t.jpg">
</div>
<!-- foto ke 9 s.d 12 -->
<div>
<img src="images/khan_t.jpg">
<img src="images/kcb_t.jpg">
<img src="images/pemimpi_t.jpg">
<img src="images/confucius_t.jpg">
</div>
</div>
</div>
<!-- aksi untuk halaman berikutnya -->
<a class="next browse right"></a>
</div>
</body>
</html>
Saatnya anda menggunakan image gallery ini di website anda, tanpa praktek maka tutorial ini hanya angin lalu saja. Tetap semangat.