Membuat Sliedshow Image Galery lightbox Seperti Facebook

Publish Date : 29-09-2016 , dibaca 7280 kali, Hari ini dibaca : 1 kali ,0 comments

Membuat Sliedshow Seperti Facebook dengan Jquery ... Setelah muter-muter di di mbah search cara membuat Image Galery Lightshot seperti facebook , akhirnya ketemu juga, Ini berawal pada salah satu project website, Nah agar tidak lupa dan ada ada keinginan untuk memposting atau menyimpan script tersebut ke dalam website ini.. siapa tau nanti akan bermanfaat lagi di project lainnya atau bermanfaat juga bagi pengunjung suckittrees.com…:D

Ok… Langsung aja…

Membuat Image Galery Lightshoot seperti facebook membutuhkan plugin javascript dalam hal ini adalah JQuery. Pada studi kasus kali ini JQuery yang akan digunakan adalah JQuery versi 1.11.1 min jika belum punya silahkan download disini. Selain JQuery kita juga membutuhkan plugin lightshot (disertakan pada source code dibagian bawah). untuk mengatur tampilan galery buatlah CSS seperti berikut:

style.css

#lgbx,
#lgbx_bcg { position: fixed }
 
#lgbx_bcg {
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: rgba(0,0,0,0.8)
}
 
#lgbx {
  background: #FFF;
  padding: 5px;
  z-index: 55;
  top: 0;
  left: 0
}
 
#lgbx_close,
#lgbx_desc,
#lgbx_next,
#lgbx_prev {
  position: absolute;
  z-index: 56;
  display: none
}
 
#lgbx_close {
  z-index: 56;
  right: 9px;
  top: 9px;
  cursor: pointer;
  width: 15px
}
 
#lgbx_desc {
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #FFF;
  padding: 5px 8px 1px;
  font-size: 12px
}
 
#lgbx_next,
#lgbx_prev {
  cursor: pointer;
  top: 50%;
  margin-top: -20px;
  height: 40px
}
 
#lgbx_next { right: 5px }
 
#lgbx_prev { left: 5px }

Kemudian buat sebuah folder dengan nama Galeri yang berisi gambar-gambar yang akan dijadikan slideshow. Berikutnya buat dile utama index.html untuk memanggil gambar-gambaar tersebut seperti berikut:

<!DOCTYPE html>
<html lang='en'>
<head>
<title>JQuery - Suckittrees.com</title>
<script src="./jquery-1.11.1.min.js"></script>
<script type='text/javascript' src='./mlightbox.js'></script>
<link rel='stylesheet' href='style.css'>
<style type='text/css'>
#gallery img {
   width: 150px;
   margin: 5px;
   cursor: pointer
}
</style>
</head>
<body>
<h1 style=" text-align:center">jQuery Image Galeri</h1>
<div style='text-align: center' id='gallery'>
  <div style='font-size: 25px; margin: 15px 0'><strong>Gallery 1</strong></div>
  <img src='./galeri/1.jpeg' alt='' title='' data-image='./galeri/1.jpeg' data-gallery='gallery1' data-desc='Image Caption 1'> 
  <img src='./galeri/2.jpg' alt='' title='' data-image='./galeri/2.jpg' data-gallery='gallery1' data-desc='Image Caption 2'> 
  <img src='./galeri/3.jpg' alt='' title='' data-image='./galeri/3.jpg' data-gallery='gallery1' data-desc='Image Caption 3'>
   
  <div style='font-size: 25px; margin: 15px 0'><strong>Gallery 2</strong></div>
  <img src='./galeri/1.jpg' alt='' title='' data-image='./galeri/1.jpg' data-gallery='gallery2'> 
  <img src='./galeri/2.jpg' alt='' title='' data-image='./galeri/2.jpg' data-gallery='gallery2'> 
   
  <script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script> 
</div>
</body>
</html>