Incipit - Plugin jQuery

What is that?

Incipit is a lightweight and easy to use jQuery plugin to display highly captivating loading screens. Let your users discover the first sentence of a great novel to brighten up their waiting times.

The key points:

• Easy to install and use.
• Highly customizable.
• Compatible with all modern browsers.

See a live demo

Table of contents

• See a live demo
• Introduction
  • Prerequisite
  • Installation
• Usage
  • Standard usage
  • Options
• Special thanks
• License

Introduction

Prerequisite

To work, Incipit needs the jQuery library.

You can call it via an official CDN:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

Or download it and insert its compressed version directly into your code:

<script src="jquery-3.2.1.min.js"></script> 

Hey, you can even use Yarn, NPM or Bower, I don't care. But install jQuery in your project before using Incipit.

Installation

Okay, is jQuery in place? We can move on then.

You must have downloaded the contents of the src folder of this repo to continue. (Note for later: the possibility of passing through package managers is in progress).

First, insert the plugin stylesheet:

<link rel="stylesheet" href="assets/jquery-incipit/incipit.min.css"> 

Then insert the plugin, after your call to jQuery:

<script src="assets/jquery-incipit/incipit.js"></script> -----or----- <script src="assets/jquery-incipit/incipit.min.js"></script> 

Do not change the structure of the files organization, unless you are ready to take over all links later...

Usage

Now that everything is in place, you can use the plugin.

Parameters

First step : Initiate Incipit

You initiate Incipit by targeting the body of your document. The purpose of this action is to create a #incipitContent item in the DOM so that you can later display your loading screen and its contents.

$('body').IncipitInit(); 

Second step : Use Incipit

Nothing simpler, you have to choose on which event to call your loading screen, and tell Incipit to show up with the "show"action.

Example on a submit :

$( "#form" ).submit(function( event ) {   event.preventDefault();   $.Incipit('show');      # Your code... }); 

Example on a click :

$( "#button" ).on("click", function( event ) {   event.preventDefault();   $.Incipit('show');      # Your code... }); 

The loading screen will then appear and give your user the first sentence of a novel randomly.

Last step : Stop Incipit

You can ask Incipit to return to its initial state with the action "hide".

setTimeout(function(){     $.Incipit('hide'); }, 3000); 

You can also delete Incipit completely by destroying it. This can be usefull, for example, if you want to call a new instance of Incipit with different options.

$.IncipitDestroy(); 

Options

It is possible to customize the Incipit instance through a series of options. You must define them when you initialize the plugin.

$('body').IncipitInit({     backgroundColor : "#FFFFFF",     borderColor : "#CCCCCC",     textColor : "#000000",     spanColor : "#7e7e7e",     icon : "fading-squares",     language : "en",     note : false,     noteCustom: '',     logo : false }); 

Here is a list of all possible options:

Special thanks

• feedbooks.com. - Provider of all displayed texts, all in the public domain.
• icons8.com-preloaders - The source of the loading icons.

License

This project was developed under the MIT license - see file LICENSE for more details.