- Default config
- Load images dynamically
- Get main color
- Get Gradient
- Lazy-reveal
- Display on event
- Manipulates color

It happens that this page needs a refresh in order to get the colorify.js script working.

There is a lot of images to process on this demo page, and sometimes, the script cannot perform the operations as fast as an image processing on a server would do.

    <div colorify>
        <img src="images/demo/image2.jpg" alt="An image">
        <img src="images/demo/image3.jpg" alt="An other image">
        <img src="images/demo/miaou.jpg" alt="An other image">
      </div>

    colorify({
        id: 1,
        container: 'colorify',
        images: false,
        accuracy: 100,
        gradient: false,
        gradientDirection: false,
        padding: 4,
        lazyReveal: false,
        give: false,
        revealOn: false
      });

## Load Images Dynamically

    <div colorify-dynamic>
      </div>

    colorify({
        id: 2,
        container: 'colorify-dynamic',
        images: [
        'images/demo/image2.jpg',
        'images/demo/image3.jpg',
        'images/demo/miaou.jpg'],
        accuracy: 100,
        gradient: false,
        gradientDirection: false,
        padding: 4,
        lazyReveal: false,
        give: false,
        revealOn: false
      });

## Lazy Reveal

    <div colorify-reveal>
        <img src="images/demo/image2.jpg" alt="">
        <img src="images/demo/image3.jpg" alt="">
        <img src="images/demo/miaou.jpg" alt="">
      </div>

    colorify({
        id: 3,
        images: false,
        container: 'colorify-reveal',
        lazyReveal: {
          transition: 2,  // The transition occurs for 2 seconds
          delay: 1
        },
        accuracy: 100,
        gradient: false,
        padding: 10
      });

## Display on Event

    <a href="javascript:void(0)" class="btn" id="demoEvent">Click me
      <div colorify-display>
        <img src="images/demo/image2.jpg" alt="">
        <img src="images/demo/image3.jpg" alt="">
        <img src="images/demo/miaou.jpg" alt="">
      </div>

    colorify({
        id: 4,
        images: false,
        container: 'colorify-display',
        lazyReveal: false,
        accuracy: 100,
        gradient: false,
        padding: 6,
        revealOn: {
          event: 'click',
          trigger: '#demoEvent'
        }
      });

Click me

## Manipulates color

As `target` you can use : a Class, an ID, All occurences (*), [attribute].

You can aslo use these two keywords : `parent` & `children`.

    <div colorify-manipulate>
        <h3 class=".demo-title">A title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta itaque facere repellat cupiditate sed expedita eaque porro at voluptates, nostrum enim, voluptatibus, dignissimos magnam quo nobis ullam a molestiae? Et.</p>
        <img src="images/demo/test.png" colorify-manipulate/>
      </div>

    colorify({
        id: 5,
        container: 'colorify-manipulate',
        lazyReveal: false,
        accuracy: 100,
        gradient: false,
        padding: 4,
        revealOn: false,
        give: {
          property: 'color',
          target: '.demo-title'
        }
      });

### A title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta itaque facere repellat cupiditate sed expedita eaque porro at voluptates, nostrum enim, voluptatibus, dignissimos magnam quo nobis ullam a molestiae? Et.

## Get Color / Get Gradient

    <div colorify-get-color>
     <img src="images/demo/deer.jpeg">
    </div>

    colorify({
        id: 6,
        container: 'colorify-get-color',
        lazyReveal: false,
        accuracy: 100,
        gradient: false,
        padding: 4
      });

    <div colorify-get-gradient>
      <img src="images/demo/deer.jpeg">
    </div>

    colorify({
        id: 7,
        container: 'colorify-get-gradient',
        lazyReveal: false,
        accuracy: 100,
        gradient: true,
        padding: 4
      });