https://github.com/aichbauer/bg_img_fader

A simple backgorund image fader created with JQuery, ready to use in every project.
https://github.com/aichbauer/bg_img_fader

Last synced: 11 months ago
JSON representation

A simple backgorund image fader created with JQuery, ready to use in every project.

• Host: GitHub
• URL: https://github.com/aichbauer/bg_img_fader
• Owner: aichbauer
• License: gpl-2.0
• Created: 2015-10-18T00:01:45.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2015-11-14T16:27:46.000Z (about 10 years ago)
• Last Synced: 2025-03-04T20:40:51.327Z (11 months ago)
• Language: JavaScript
• Size: 156 KB
• Stars: 1
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# bg_img_fader

A simple backgorund image fader created with JQuery, ready to use in every project.

AUTHOR: AICHBAUER LUKAS

email: rudolfson.junior@gmail.com

***

### Adding the css and js

Import this two files into your html head tag like  

      

    

    

You need to get Jquery and import it right in front of every other javascript file.

***

### Adding pictures to the fader

Simply write your path to your picture inside of the images array in the bg_img_fader.js. 

Feel free to write as many paths as you want. For example...  

    var images = ["img/bg1.jpg","img/bg2.jpg","img/bg3.jpg","img/bg4.jpg"];

    

It is recommended to use absolute paths!

***

### Adding the fader to your html site

create a div tag with a class called "fader" like  

    


    

***


Congratulation now you have created your first background fader.

if you want to change the duration of the fades simply change this three numbers

(inside of this snippet they are called "CHANGE ME", "CHANGE ME1" is by default 500, and "CHANGE ME2" is by default 5000). 

This numbers represent miliseconds, so one second is equal to 1000 milisecond.

      setInterval(function(){  

        image.fadeOut(CHANGE ME1, function(){

          image.css("background-image","url("+images[count++]+")");

          image.fadeIn(CHANGE ME1);

        });

        if(count == images.length)

        {

          count = 0;

        }

      },CHANGE ME2);`