Skip to content

Latest commit

 

History

History
48 lines (35 loc) · 2.95 KB

README.md

File metadata and controls

48 lines (35 loc) · 2.95 KB
Raw

simplebox.js

simplebox.js is a lightweight lightbox plugin (~936 bytes) that is easy to modify or extend to fit your needs. This plugin is intended to be a quick, responsive, efficient.

The idea behind this plugin was to make the process of setting up a lightbox painless. My experience with finding and setting up lightbox plugins has been pretty bad. The plugins I've come across almost always have too many features. simplebox.js is designed to have just one feature: lightboxing. It's responsive out of the box and allows only a few crucial settings.

Installation

To install simplebox, you will have to include the following resources in your page. The JS files should be loaded in the order stipulated below. For the CSS file, you can either incorporate it with your site's stylesheet, or load it externally through the <link> element in <head>.

Type File Name Description
JS jQuery jQuery is obviously needed
JS dist/js/simplebox.min.js Confers the main functionality of the plugin.
CSS dist/css/simplebox.min.css Offers styles that are crucial for the correct display of simplebox. The appearance will break if this is not included. Properties in this file include the necessary vendor prefixes.

Usage

Basic

It is rather straightforward to use simplebox—just add the slb class to all the images you want this plugin to work for and then simply chain the .simplebox() method to $(".slb") in your JavaScript.

<img class="slb" src="/path/to/image" alt="lorem ipsum" />
$(function () {
    $(".slb").simplebox();
});

Advanced

The plugin comes with four options. Yes, just four. Think of this as a feature and not a drawback! If you want to access these options, call the plugin like this:

$('.slb').simplebox({
    fadeSpeed: 300, // default is 400ms, applied to all fade animations in the plugin
    darkMode: true, // default is false
    postfix: "_full", // default is ""
    hqClass: "highres" // default is "hq"
});

You can use postfix and hqClass options to customize the path to the image used in the pop-up. For every image defined as <img src="[initial path].[extension]" class="slb [hqClass]" alt="[alt]"> simplebox will use <img src="[initial path][postfix].[extension]" class="slb" alt="[alt]">. Notice that you shouldn't use hqClass with images that don't have a version with the postfix.

Also, simplebox keeps the values of srcset and alt attributes in the pop-up image as well so you can do some cool things with srcset if you need to as well!

If you are using this plugin and want your product to be listed here, hit me up on @Ratik96 on Twitter!