MyGalleryBox Version 1.0
A Simple Jquery Plugin For Gallery

By Syakir Rahman

MyGalleryBox is a simple jquery plugin to make simple gallery and lightbox. It's easy to use, good-looking and has some cool features. Those are responsive, grid option for gallery, navigation by keyboard, etc.

Download

Before using, you have to call the libraries as shown below.

<!-- Add this inside <head> tag -->
<link rel="stylesheet" type="text/css" href="css/mygallery.css"/>
	
<!-- Add this before </body> -->
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/mygallery.js"></script>

Example 1 : Grid Gallery with Lightbox

You can create a grid gallery with a simple setting.

HTML

<div class="example1">
    <a href="images/1.jpg" title="Lorem ipsum dolor sit amet"><img src="images/1.jpg" alt="Gambar 1"/></a>
    <a href="images/2.jpg" title="Lorem ipsum dolor sit amet 2"><img src="images/2.jpg" alt="Gambar 2"/></a>
    <a href="images/3.jpg" title="Lorem ipsum dolor sit amet 3"><img src="images/3.jpg" alt="Gambar 3"/></a>
    <a href="images/4.jpg" title="Lorem ipsum dolor sit amet 4"><img src="images/4.jpg" alt="Gambar 4"/></a>
    <a href="images/5.jpg" title="Lorem ipsum dolor sit amet 5"><img src="images/5.jpg" alt="Gambar 5"/></a>
    <a href="images/6.jpg" title="Lorem ipsum dolor sit amet 6"><img src="images/6.jpg" alt="Gambar 6"/></a>
    <a href="images/7.jpg" title="Lorem ipsum dolor sit amet 7"><img src="images/7.jpg" alt="Gambar 7"/></a>
    <a href="images/8.jpg" title="Lorem ipsum dolor sit amet 8"><img src="images/8.jpg" alt="Gambar 8"/></a>
    <a href="images/9.jpg" title="Lorem ipsum dolor sit amet 9"><img src="images/9.jpg" alt="Gambar 9"/></a>
    <a href="images/10.jpg" title="Lorem ipsum dolor sit amet 10"><img src="images/10.jpg" alt="Gambar 10"/></a>
</div>
The codes with green color is url of main image. The codes with red color is image url of thumbnail. You can use different image for thumbnail.

Jquery

$(document).ready(function() {	
	$(".example1").mygallery({
	grid: 6
	});
});

If you don't set "grid" option, the default value is "3".

Result

Gambar 1 Gambar 2 Gambar 3 Gambar 4 Gambar 5 Gambar 6 Gambar 7 Gambar 8 Gambar 9 Gambar 10

Example 2 : No-Grid Gallery with Lightbox

If you don't want use the default grid style, or want to use your own grid style, you can set grid option with "0" value.

Jquery

$(document).ready(function() {	
	$(".example1").mygallery({
	grid: 0
	});
});

Result

Gambar 1 Gambar 2 Gambar 3

Example 3 : Just Lightbox for single image

If you want just set lightbox for single image, or some images which is not related each other you can try the following method.

HTML

<a href="images/7.jpg" class="example3" title="Lorem ipsum dolor sit amet 7">
	<img src="images/7.jpg" alt="Gambar 7"/>
</a>

Jquery

$(document).ready(function() {	
	$(".example3").justlightbox();
});

Result

Gambar 7