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 from GitHub, or install from npm or bower:

Setup

  1. Copy the included folders with JavaScript, CSS and images to your project.
    You will find everything you need in the folder /dist/.

  2. Add slidebox.css to the header of your html.
  3. Load jQuery in your page, preferably in the footer to optimize load times.
  4. On the next line load slidebox-min.js or slidebox-lazy-min.js.
  5. 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 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. Load the lazy version of the plugin: slidebox-lazy-min.js.
  2. Add the CSS class lazyload to your slide element.
  3. Move your image source to a data attribute called data-src.

...

Created by Carst vd Molen