Simple Gallery
Square Gallery can be generated as a separate gallery page or easily integrated into existing html page.
Lightweight and Fast
No-dependency (less than 4kb minified and gzipped).
Beautiful Text Blocks
The gallery can also be used for building some nice website menus.
Responsive
Make your web page look good on all devices.
Awesome Photo Captions
Simply select one of the predefined types
Save your time
Do not waste time on the implementation of the same components.
Buy on Codecanyon.net

How To Use ↓

Include JavaScript and CSS files in the <head> of your HTML page.

<head>
	...
	<link rel='stylesheet' type='text/css' href='css/square-gallery.min.css'>
	<script type="text/javascript" src="js/square-gallery.min.js"></script>
	...
</head>

Declare the gallery and its parameters in the <head> of your HTML page.

<head>
	...
	<script type="text/javascript">
		new SquareGallery({
			container: 			'sqr-gallery'
			containerBGColor:   '#fff',
			qtyColumns:         2,
			photoCaptions:      true,
			captionType:        1,
			textSquares:      	true,
			links:				true
		});
	</script>
	...
</head>

Add the container with id attribute to the <body> of your document. The container should contain the images you`d like to display in the gallery.

<div id="sqr-gallery">
	<img data-src="./img/1.jpg" />
	<img data-src="./img/2.jpg" />
	<img data-src="./img/3.jpg" />
	...
</div>