
Product
Introducing Module Reachability: Focus on the Vulnerabilities That Matter
Module Reachability filters out unreachable CVEs so you can focus on vulnerabilities that actually matter to your application.
background-image-gallery
Advanced tools
A JavaScript background gallery that fades from one image to the next.
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).
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>
npm install background-image-gallery
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.).
// 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
})
The gallery takes an { options }
object as its only argument:
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.
How long do you want each photo to show before fading into the next? Tell me in milliseconds.
How fast do you want one image to fade into the next? Again, milliseconds please.
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()
FAQs
A JavaScript background gallery that fades from one image to the next.
The npm package background-image-gallery receives a total of 10 weekly downloads. As such, background-image-gallery popularity was classified as not popular.
We found that background-image-gallery demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Module Reachability filters out unreachable CVEs so you can focus on vulnerabilities that actually matter to your application.
Company News
Socket is bringing best-in-class reachability analysis into the platform — cutting false positives, accelerating triage, and cementing our place as the leader in software supply chain security.
Product
Socket is introducing a new way to organize repositories and apply repository-specific security policies.