Demo: https://rcus.github.io/jquery-gallerybox/

This is the easiest way to get Gallerybox.

npm install jquery-gallerybox

Add stylesheet with this line in your <header>-section:

<link rel="stylesheet" href="path/to/gallerybox.css">

Add jQuery (if you haven't) and Gallerybox with these lines at the end of your document, just before the </body>-tag:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="path/to/jquery-gallerybox.js"></script>

For each image you want to add to the Gallerybox, just add a class. How about gbox?

<img src="image1.jpg" class="gbox">
<img src="image2.jpg" class="gbox">
...

Bind images with jQuery:

<script>
  $('.gbox').gallerybox();
</script>

You can use your own settings, just add them when you bind images with jQuery:

<script>
  $('.gbox').gallerybox({
    bgColor: 'blue',
    bgOpacity: 0.5,
    closeText: 'EXIT'
  });
</script>

Released under the MIT license, see LICENSE.