SlideShowJS

~ An easy SlideShow maker for web ~ Version 1712-4

Introduction

SlideShowJS is a simple JS script that allows you to implement a slideshow in your web page. Its strengths are the simplicity to implement it and its fluid animations that allow you to slide the elements up or down.

Implementation

The implementation is extremely simple, you need just to create a div with slideshow as class attribute and overflow: hidden and a pre-set height as style and the job is done!
Indeed, doing so, the script will create an array of slideshow objects that will slide your elements up or down at your command.

Animate your SlideShow

To animate your slideshow you just need to call one of the following functions based on the animation you want
Remember that a single call to a function moves the elements just once!!!

• Slide
  • slideUp() - Slide the elements up once
  • slideDown() - Slide the elements down once
• Cover
  • cover() - cover the current element with the second in the sequence (requires images)

Customizable parameters

You can set some values to the following variables to change the behaviour of the animations

• var slideshowSpeed - The smaller it is, the faster the element slides (default 1)
• var growthRatio - Number of pixels the element slides for slideshowSpeed milliseconds (default 2)

Script Structure

SlideShow Object

Is an object that identifies a single slideshow in your web page and has the following attributes

• element - Slideshow Div
• height - Height of the slideshow div
• width - Width of the slideshow div
• currentElement - Current element displayed on slideshow div

function SlideShow(element, height, width)

Is the slideshow Object constructor. It basically sets the parameters needed by the object constructor.

function slideshowInit()

This function is called by an event listener as soon as the page has been loaded and fills an array of slideshow objects, calling for every div with "slideshow" as class attribute the slideshow constructor.

function slideUp()

For every slideshow div present in the slideshow object array calls the function which carries of animating the elements movement. (calls slideUpAnim())

function slideUpAnim(slideshowObj)

Is the function called by slideUp and carries of making the animation "slideUp". What it does is basically:

• Inside a timeout with slideshowSpeed as timeout: sets the style of the current displayed element to margin-top: -slideCounter, where slideCounter is a variable that goes from 0 to the height of the slideshow div.
• Increate the variable slideCounter of the value of growthRatio
• Check if slideCounter is less or equal than the height of the slideshow div:
  • If the condition is true:
    • Call another time slideUpAnim()
  • If the condition is false (which means the animation ended):
    • save in a variable the older displayed element
    • Removes from it the style attribute
    • Removes it from the page
    • set currentElement to current one which is displayed
    • Append the older element at the end of the sequence

slideDown()

For every slideshow div present in the slideshow object array calls the function which carries of animating the elements movement. (calls slideDownInit())

slideDownInit(slideshowObj)

Initialize the slideDown animation. What basically it does is:

• Set slideCounter to the negative value of the slideshow div height
• get in a variable the last element of the slideshow
• Removes the last element of the slideshow from the page
• Set to the variable containing the last element of the slideshow margin-top: slideCounter
• Inserts before the displayed element of the slideshow the last element of the slideshow
• Calls slideDownAnim()

slideDownAnim(slideshowObj)

Is the function called by slideDownInit and carries of making the animation "slideDown". What it does is basically:

• Inside a timeout with slideshowSpeed as timeout: increases the value of slideCounter of growthRatio and apply the margin-top attribute to the last element of the slideshow. Then it checks if the value of slideCounter is less or equal than 0.
  • If the condition is true:
    • Calls slideDownAnim again
  • If the condition is false: (which means the animation ended)
    • Store the old displayed element in a variable
    • Removes the old displayed element from the page
    • Removes the margin-top attribute to the new displayed element
    • Puts the old displayed element between the new displayed element and the second of the sequence

  function cover()

  For every slideshow div present in the slideshow object array calls the function which carries of animating the elements movement. (calls coverInit())

  function coverInit(slideshowObj)

  Initialize the cover animation. What it does is basically:

  • Store the content of the current element in a variable
  • Change the currentElement of slideshowObj with the second in the sequence
  • Set the style attribute of the second element with a padding-top equal to the height of the slideshow div and a background-image which is the same of the current displayed element (that's why it requires images as elements).
  • Remove the displayed element
  • set slideCounter to the height of the slideshow div
  • Append the old displayed element at the end of the slideshow sequence
  • Call coverAnim()

  function coverAnim(slideshowObj)

  Is the function called by coverInit() and carries of making the animation "cover". What it does is basically:

  • Inside a timeout with slideshowSpeed as timeout: decrease the value of slideCounter of growthRatio and apply the padding-top attribute to the second element of the slideshow. Then it checks if the value of slideCounter is greater or equal than 0.
    • If the condition is true...
      • calls coverAnim()
    • If the condition is false... (which means the animation ended)
      • Removes the style attribute to the displayed element (which was the second in the sequence)

  Credits

  Developed by Christian Visintin
  Copyright © 2017 Christian Visintin
  

  License

  SlideShowJS

  Copyright (C) 2017 Christian Visintin

  SlideShowJS is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

  SlideShowJS is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

  You should have received a copy of the GNU General Public License along with SlideShowJS. If not, see http://www.gnu.org/licenses/.