Circus Gallery

~30KB (gziped) Javascript lightbox gallery

Uses Preact, react-images for lightbox, parcel for bundling and a Gallery component from a previous project of mine.

Installation

Embed the dist/circus.js file into your document.

<script src="https://cdn.jsdelivr.net/gh/petoem/circus-gallery@1/dist/circus.js"></script>

Usage

Add a div to your HTML document. (This div element will hold the gallery.)

<div id="gallery"></div>

Finally you need to create the gallery and supply it a list of images.

circusGallery.create(document.getElementById('gallery'), [
    {
      title: "Random example",
      images: [
        {
          src: "https://example.com/image_1.jpg",
          caption: "Random 1",
          alt:"1"
        },
        {
          src: "https://example.com/image_2.jpg",
          caption: "Random 2",
          alt:"2"
        },
        ...
      ]
    },
    {
      title: "Some more example images",
      images: [
        {
          src: "https://example.com/image_3.jpg",
          caption: "More 1",
          alt:"1"
        },
        ...
      ]
    },
    ...
  ]);

Bookmarking images

window.location.hash is used to make an open image bookmarkable. A base64 encoded version of the image src is used as a hash value.

Contributing

1. Fork it!
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am ‘Add some feature’)
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

Contributors

• petoem Michael Petö - creator, maintainer

License

Code licensed under the MIT License

Circus Tent image from Twitter Emoji (Twemoji)

Example photos from Unsplash Source