About

This jQuery based plugin allows for easy implementation of Full Screen Slides with custom images. This is currently version 1.0.

How To Use

Zip Download

First, include the jQuery, JS, and CSS in your page. You should load the JS at the bottom of the body, so it doesn't block content rendering. The CSS should be included in the head.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript" src="FSS/scripts/FSS.min.js"></script>
<link rel="stylesheet" type="text/css" href="FSS/content/FSS.min.css">

Next, set up the FSS container, and optionally, the UI arrows..


<div class="FSStri" id="FSSLeftBtn"></div>
<div class="FSStri" id="FSSRightBtn"></div>
<div class="FSStri" id="FSSUpBtn"></div>
<div class="FSStri" id="FSSDownBtn"></div>

<div id="FSScontainer" class="FSSanim"></div>

To add a column or a cell, call the FSS addToFSS function. This function has 5 input variables, in the following order:
typeIsColumn: (Boolean) indicates whether a new column with a single cell(true) or a new cell in an existing column(false) is being added.
before: (Boolean) indicates whether the column/cell will be added to the left/top(true) or the right/bottom(false).
column: (jQuery object, number, or null/undefined) optional if typeIsColumn is false, in which case it should be null or undefined. Otherwise, it can be an existing column's jQuery object or an existing column's index. It specifies what column to add the cell to if a cell is being added.
input: (string) optional. defines the src element for the image in the cell that is being added.
callback: (function) optional. A callback function for after the column/cell is added. It has two jQuery objects passed to it:

newElem the new column or row that has been added.
newPic the new img element that has been added if a cell was added, otherwise it is null.

<script>
$(document).ready(function(){
  //adding a column with one cell to the FSS
  FSS.addToFSS(true, true, null, 'images/1.png');
  //adding a cell to the bottom of the column we just added
  FSS.addToFSS(false, false, 1, 'images/2.png');
  //adding another column to the right of the first column
  FSS.addToFSS(true, false, null, 'images/3.png');
  //adding another column to the left
  FSS.addToFSS(true, true, null, 'images/4.png');
  //adding a cell to the beginning of the last column
  FSS.addToFSS(true, true, 3, 'images/5.png');
  //adding a cell to the end of the first column
  FSS.addToFSS(true, false, 1, 'images/6.png');
});
</script>

To turn animations on or off, or change the animation speed, call the FSS changeSettings function. This function has 2 input variables, in the following order:
_animate: (Boolean) indicates whether animations are turned on(true) or off(false).
_animSpeed: (Number) indicates the speed in milliseconds of sliding animations.

<script>
$(document).ready(function(){
  //set animations to take 3 seconds
  FSS.changeSettings(true, 3000);
  //turn animations off
  FSS.changeSettings(false);
  //turn animations back on, and reset them to default speed
  FSS.changeSettings(true, 400);
});
</script>
See example in action.

License

Creative Commons License
Full Screen Slides Library by James Gould is licensed under a Creative Commons Attribution 4.0 International License.