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.


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


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 additional CSS for layout. This example loads background images using a slideBox.js JavaScript function, and background-size: cover to create image blocks equal in size. Look at the CSS included on this page 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