jQuery Gallerybox

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

Set up

1. Install via NPM

This is the easiest way to get Gallerybox.

npm install jquery-gallerybox

2. Include files in HTML

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>

Usage

1. Select images

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">
...

2. Attach with plugin

Bind images with jQuery:

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

Settings

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>

Option	Default	Description
bgColor	#000	Set backgroundcolor for gallerybox. Use values like '#001f00', 'darkgrey' or 'rgb(21, 21, 14)'.
bgOpacity	0.95	Let you adjust the transparency of the backgroundcolor. Use values from 0 to 1.
closeText	CLOSE	Use your own text in the top-right corner.

License

Released under the MIT license, see LICENSE.