Skip to content

WIKI.md

Latest commit

 

History

History
73 lines (61 loc) · 2.76 KB

WIKI.md

File metadata and controls

73 lines (61 loc) · 2.76 KB

Table of contents

Usage

Inclusion

To use the slideshows you will need to include some scripts and CSS in your html files head.

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

<!-- General CSS rules to make slideshows function -->
<link rel="stylesheet" type="text/css" href="gfx/slideshow.css" />

<!-- Theme CSS rules deciding how everything inside the slideshows should look -->
<link rel="stylesheet" type="text/css" href="themes/original.css" />

Use

After you have included the necessary files all you need to do is create a JSON file that represents your slideshow:

{
    "width":"100%",
    "height":"100%",
    "auto-trans":4000,
    "transition":"scroll",
    "transition-duration":"1.0s",
    "slides":[
        {"background":"#FFF", "img":{"src":"example-content/BIG.png","width":"100%","height":"100%"}},
        {"background":"#FFF", "img":{"src":"example-content/RESPONSIVE.png","width":"100%","height":"100%"}},
        {"background":"#FFF", "img":{"src":"example-content/office.jpeg","width":"100%","height":"100%"}}
    ]
}

And then include it in your html like so:

<div class="slideshow" data-slide-name="a_unique_identifier" data-slide-src="path/to/json/src"></div>

(All the attributes are necessary, that includes the class)

Source

Definitions

Each and every JSON source file will contain a bunch of definitons of what it will contain and how it will look. Some of these represents CSS rules and can therefore be treated as such whilst some of them are normal numbers, strings etc.

If you are unfamiliar with JSON you can look through here.

Outer

Here I will list all the outer attributes that has an effect on the whole slideshow:

  • width: CSS rule corresponding to the size of the slideshow
  • height: CSS rule corresponding to the size of the slideshow
  • auto-trans: A number that represents how fast it should change slide, omit to not have automatic transitions
  • transition: A string representing what type of transition to use (fade or scroll)
  • transition-duration: A CSS rule that decides how long every transition will take
  • slides: A JSON array containing all the slides

Inner

Here I will list all the inner attributes that has an effect upon the slides:

  • background: Same as CSS background, can be an img or color
  • img: A image, similar to background except you have more controll over the styling
    • src: Path to the source image
    • width: CSS width
    • height: CSS height