bgzy.js

Elegant background slideshow.

© Nino Camdzic 2016

Download latest

What is it?

Just watch the background for a bit and all will be clear. ;-)

Features

  • Transitioning background changes (CSS3 transitions).
  • Set for each background a different transition.
  • No third party libraries required.
  • API for controlling the slideshow.

Browser support

All modern browsers and IE10+ are supported.

Getting started

1 Include bgzy.css in your page:

<link href="path/to/bgzy.css" rel="stylesheet">

2 Include bgzy.js in your page:

<script src="path/to/bgzy.js"></script>

3 Simple initialization:

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
	    bgzy.inst([
	        "img/bg1.jpg",
	        "img/bg2.jpg",
	        "img/bg3.jpg",
	    ]);
    };
</script>

3 or initializing with different transitions (optional):

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        bgzy.inst([
            ["img/bg1.jpg", "fadeOut"],
            ["img/bg2.jpg", "zoomFadeOut"],
            ["img/bg3.jpg", "slideLeft"]
        ]);
    };
</script>

Documentation

Options

Option Default Description
timeout 3000 The time(miliseconds) to wait before displaying the new background.
fx fadeOut Transition to use when switching backgrounds. Possible values are: fadeOut, zoomFadeOut, slideUp, slideLeft.
fxDuration 500 Duration(miliseconds) of a transition.
showTicker false Displays the ticker at the top of the page. Either true or false.
backgroundClass bge CSS class name of the background elements. Do not change if you don't know what you are doing.
wrapperClass bgzy CSS class name of the wrapping element which contains the backgrounds. Do not change if you don't know what you are doing.
zIndex -9999 Makes sure the background elements are rendered behind all elements on a page. Only edit if backgrounds appear above other elements within your page.

Changing options

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        bgzy.inst([
            "img/bg1.jpg",
            "img/bg2.jpg",
            "img/bg3.jpg",
        ],{
            timeout: 5000,
            showTicker: true
        });
    };
</script>

API

Method Params Returns Description
start - - Starts the slideshow. This enables autoplay.
stop - - Stops the slideshow.
next - - Go to the next background image. This disables autoplay.
prev - - Go to the previous background image. This disables autoplay.

Usage: Different transitions

// Make sure you already have initialized bgzy.js before calling
// any API methods.
bgzy.inst().next();