giffy-images v1.1.11

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

Methods

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