Membuat Image Galery Lightshot Seperti Facebook

Setelah mendapatkan kasus bagaimana membuat Image Galery Lightshot seperti facebook pada salah satu project website ada keinginan untuk memposting atau menyimpan script tersebut ke dalam blog ini.. siapa tau nanti akan bermanfaat lagi di project lainnya atau bermanfaat juga bagi pengunjung jagungodak.web.id…:D

 

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:

[css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="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 }

[/css]

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 - Jagungodak.web.id</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>

sampai disini untuk melihat demo silahkan klik disini (Demo Galery pada project, hasil script diatas silahkan download sorcecodenya pada link dibawah)

Untuk Source code lengkap silahkan download disini

Related Post

Implementasi Parameter Data Filter pada HTML5 Banyak hal menarik yang bisa kita pelajari pada versi teranyar HTML yaitu HTML5. Pada HTML5 terdapat banyak fitur tambahan salah satunya adalah penamb...
Jquery: Mengisi Form Input Otomatis Berdasarkan Ka... Ada beberapa kasus yang mengharuskan kita untuk mengisi form input otomatis berdasarkan kata kunci (keyword) tertentu. Misalnya form pembayaran SPP si...
Bootstrap: Mengenal Elemen Responsive Table pada B... Bootstrap merupakan framework CSS yang sangat responsive mudah diimplementasikan dengan desain yang menarik dan compatible dengan berbagai jenis brows...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

three × five =

This site uses Akismet to reduce spam. Learn how your comment data is processed.