🚀 Socket Launch Week 🚀 Day 3: Socket Acquires Coana.Learn More
Socket
Sign inDemoInstall
Socket

background-image-gallery

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

background-image-gallery

A JavaScript background gallery that fades from one image to the next.

2.0.0
latest
Source
npm
Version published
Weekly downloads
10
400%
Maintainers
1
Weekly downloads
 
Created
Source

Fullscreen fading image goodness! This is a tiny (963 bytes gzipped!) JavaScript library for creating a fullscreen background image gallery where the images fade from one to the other. Made with nothing but love and vanilla JavaScript (redundant, I know).

Installation

Manually

Simply include styles.css in the <head>...

<head>
  ...
  <link rel="stylesheet" href="styles.css">
  <!-- Via Unpkg CDN -->
  <!-- <link rel="stylesheet" href="https://unpkg.com/background-image-gallery/dist/styles.css"> -->
</head>

and include big.js just above your closing </body> tag...

<body>
  ...
  <script src="big.js"></script>
  <!-- Via Unpkg CDN -->
  <!-- <script src="https://unpkg.com/background-image-gallery/dist/big.js"></script> -->
</body>

Via NPM

npm install background-image-gallery

What It's Doing

Is this magic?! All code is magic. The gallery simply creates a new <div> for each photo you supply, appends it to document.body, and applies some necessary inline CSS. A class will be toggled on each div to show/hide the images. The included CSS file takes care of the rest (such as full-screen coverage, width & heights, etc.).

Usage

// Store in a variable to stop the gallery later on (see below).
const gallery = big({
  photos: [{ image: 'photo1.jpg'}, { image: 'http://example.com/photo2.png'}],
  interval: 5000,
  fade: 3000,
  random: true
})

Options

The gallery takes an { options } object as its only argument:

photos

Supply an array of objects that take the shape of { image: <file/location>.png }.

The image locations can be local to wherever you're running the code or out there on the interwebs:

[
  { image: './location/to/local/image.png' },
  { image: 'https://i.imgur.com/M0IIqJ2.jpg' }
]

Why isn't it an array of just file locations, you ask? Because I plan on adding other features that will require objects to be used instead... that's why.

interval

How long do you want each photo to show before fading into the next? Tell me in milliseconds.

fade

How fast do you want one image to fade into the next? Again, milliseconds please.

random

If you provide true, your array will be randomized and everyone will think you're awesome.

Ok, so you've got the gallery running on the page but enough's enough. How do we stop this thing? And who's gonna put away all those <div>'s this thing took out? Simple. The big function returns an object with 2 simple methods - stop and clean:

const gallery = big({ ... })

/* Time passes by... */

// The gallery stops but the images are still in the DOM.
gallery.stop()

// The gallery stops and the images are removed from the DOM.
gallery.clean()

Keywords

background

FAQs

Package last updated on 11 Sep 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts