It's simple html and javascript gallery
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
js
README.md
index.html

README.md

gm-gallery

It's simple html and javascript gallery

Firstly you have to import jQuery, gm-gallery.js, gm-gallery.css:

in head tag:
	<link rel="stylesheet" type="text/css" href="css/gm-gallery.css">
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
and before end of body tag - </body>
	<script type="text/javascript" src="js/gm-gallery.js"></script>

Then create div:

  <div id="gm-gallery" gm-arrows="true">
  
  </div>
with parameter "gm-arrows". You can set "true" or "false" it means visibility of arrows to next/prev image.
and then put image in gallery div.
Such as:
  <div id="gm-gallery" gm-arrows="true">
	<img gm-icon-size="20%" gm-open-size="small" gm-bg="dark" src="img/picture1.jpg">
	<img gm-icon-size="small" gm-open-size="medium" gm-bg="dark" src="img/picture2.jpg">
	<img gm-icon-size="medium" gm-open-size="large" gm-bg="light" src="img/picture3.jpg">
	<img gm-icon-size="large" gm-open-size="60%" gm-bg="light" src="img/picture4.jpg">
  </div>

Tag "img" have 3 another parameters:

"gm-icon-size" - size of thumbnail image
"gm-open-size" - size of opened image
"gm-bg" - color of background image

Values

gm-icon-size:

gm-icon-size="small"
gm-icon-size="medium"
gm-icon-size="large"
or you can use percentages gm-icon-size="40%"

gm-open-size:

gm-open-size="small"
gm-open-size="medium"
gm-open-size="large"
or you can use percentages gm-open-size="40%"

gm-bg

gm-bg="dark"
gm-bg="light"