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;
})