icon

slideBox.js

A jQuery plugin for easy creation of responsive lightbox-style
media galleries and carousels. Features:

See below for basic setup and examples.
Download the distribution from the GitHub repository.

Setup

  1. Add slidebox.css to the header of your html.
  2. Load jQuery in your page, preferably in the footer to optimize load times.
  3. On the next line load slidebox-min.js. Then, initialize the slideBox function.
  4. Create a gallery by wrapping your images in an element
    with class slide-box. See the examples below, and the source of this page.

Examples

Example 1: Image Grid with Zoom

HTML structure:

You can nest images one element deep. The parent element needs to have a class of slide. For instance:

Provide your own CSS for layout. The example below uses background-size: cover to create image blocks equal in size. Find the CSS included in /demo/demo.css.

Example 3: Lazy Loading

slideBox.js can lazyload images through the lazysizes.js plugin.
To make this work:

  1. Add the CSS class lazyload to your element.
  2. Move your image source to a data attribute data-src.

...

Created by Carst vd. Molen