contact
WA: 0812-7537-1724
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: 5AB31960
ebsofmail@gmail.com

Membuat Sliedshow Image Galery lightbox Seperti Facebook

Posted in Javascript Jquery Life at 29 September 2016 With 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

sliedshow galeri lightbox seperti facebook

▼ Download Source Code Dibawah Ini ▼


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>

 Untuk source code project diatas silahkan download disini

Artikel Terkait

Diskusi