GiffyImages
A JavaScript plugin to turn many elements images into a gif magically.
Preview
Getting started
npm i giffy-images -D
or
yarn add giffy-images -D
You can use in your bundler like grunt, gulp, webpack, etc...
or...you can use CDN
<script src="https://cdn.jsdelivr.net/npm/giffy-images/dist/giffy-images.min.js"></script>
How to use
Some images inside a element:
<div id="giffy-images-container">
<img style="display: none;" width="150" src="<YOUR_SRC_IMAGE_1>" >
<img style="display: none;" width="150" src="<YOUR_SRC_IMAGE_2>" >
<img style="display: none;" width="150" src="<YOUR_SRC_IMAGE_3>" >
<img style="display: none;" width="150" src="<YOUR_SRC_IMAGE_4>" >
</div>
Implementation:
const optionsGI = {
imageHolderId: 'giffy-images-container',
timer: 100,
autoplay: false
}
const giffyImages = new GiffyImages(optionsGI)
// Play
giffyImages.play()
// Stop
giffyImages.stop()
// Play and Stop
giffyImages.playStop()
Options
| Option | Default | Description |
|---|---|---|
| imageHolderId | giffy-images-container | Parente element id |
| speed | 100 | Milisseconds speed |
| autoplay | false | If Giffy run when is initialized |
Methods
| Method | Description |
|---|---|
| play() | Start giffy |
| stop() | Stop giffy |
| playStop() | Start if it's stoped and Stop if it's started |
Using play()
const optionsGI = {
imageHolderId: 'giffy-images-container',
speed: 100
}
const giffyImages = new GiffyImages(optionsGI)
document.getElementById('YOUR_CLICKABLE_ELEMENT_ID').addEventListener('click', (e) => {
giffyImages.play()
e.preventDefault();
return false;
})
Using stop()
const optionsGI = {
imageHolderId: 'giffy-images-container',
speed: 100
}
const giffyImages = new GiffyImages(optionsGI)
document.getElementById('YOUR_CLICKABLE_ELEMENT_ID_TO_START').addEventListener('click', (e) => {
giffyImages.play()
e.preventDefault();
return false;
})
document.getElementById('YOUR_CLICKABLE_ELEMENT_ID_TO_STOP').addEventListener('click', (e) => {
giffyImages.stop()
e.preventDefault();
return false;
})
Using playStop()
const optionsGI = {
imageHolderId: 'giffy-images-container',
speed: 100
}
const giffyImages = new GiffyImages(optionsGI)
document.getElementById('YOUR_CLICKABLE_ELEMENT_ID').addEventListener('click', (e) => {
giffyImages.playStop()
e.preventDefault();
return false;
})
47 May 24, 2022
4 Nov 30, 2022
7 Apr 6, 2022
9 Jan 6, 2023
7 Dec 6, 2022
1.6k Jan 4, 2023
7 Jul 31, 2022
8 Nov 3, 2022
5 Sep 15, 2022
8 Aug 3, 2022