A jQuery plugin for easy creation of responsive lightbox-style
media galleries and carousels. Features:
- Groups together your media in a lightbox-style gallery or carousel.
- Autorotating carousels.
- Carousel pager support.
- Basic CSS transitions between slides.
- Lazyloads images and video through lazysizes.js.
- Minimal styling included.
See below for basic setup and examples.
Download the distribution from the GitHub repository.
- Add slidebox.css to the header of your html.
- Load jQuery in your page, preferably in the footer to optimize load times.
- On the next line load slidebox-min.js.
- Create a gallery by wrapping your images in an element
slide-box. See the examples below, and the source of this page.
Example 1: Image Grid with Zoom
You can nest images one element deep. The parent element needs to have a class of
slide. For instance:
background-size: cover to create image blocks equal in size. Look at the CSS included on this page in /demo/demo.css.
Example 2: Carousel
Create a carousel by adding the class
slide-box-carousel to your container. Carousels have support built-in for pager functionality. The pager needs to be included in the HTML.
As a starting point, the default
slidebox.css provides a responsive width of 50% as a starting point, with an image ratio of 4/3. You can override this in your own CSS. For instance, if you need the carousel to have a fixed width.
The carousel above has been set to 100% of its parent by defining these styles:
For now, use the keyword
!important to make sure the override sticks.
Example 2A: Automatic Looping
Create a carousel that loops by itself by setting two data attributes:
- Time between slide transitions in ms.
Example 3: Lazy Loading
slideBox.js can lazyload images through the lazysizes.js plugin.
To make this work:
- Add the CSS class
- Move your image source to a data attribute
Created by Carst vd Molen