Paintbrush – ThemePunch

This article will show you how to setup the PaintBrush Addon for jQuery Slider Revolution

Important Note:

You can get the PaintBrush Add-On pack directly from our support center or by email at help at themepunch dot support

1. To get started with the Particles Add-On, unzip and upload the "paintbrush-addon" folder into your production site.

Note:

The PaintBrush Add-On zip package includes the full demo template markup and the required images.

2. Next, the PaintBrush stylesheet and script should be placed below all other scripts on the page.

<link rel="stylesheet" type="text/css" href="css/revolution.addon.paintbrush.css" />

<script type="text/javascript" src="js/revolution.addon.paintbrush.min.js"></script>

3. Next, in your slider's main settings script, you'll need to call the PaintBrush Add-On as shown in the following example.

var slider = jQuery('#rev_slider_1').show().revolution({

/* **************************** */
/* REGULAR SLIDER SETTINGS HERE */
/* **************************** */

});

/*
Instantiate the PaintBrush AddOn
Args: slider reference (assigned above)
*/
RevSliderPaintBrush(slider);

4. Next, setup your Slides with your PaintBrush settings and images:

size

The HTML5 Canvas lineWidth(in pixels)

blurAmount

The CSS3 Blur filter amount in pixels

fadetime

The amount of time before the paint disappears (in milliseconds)

image

Paint the slide's main background image

edgefix

Stretch the image (percentage) to help fix blur effect soft edges

fixedges

true
false

Stretch the image to help remove blur soft edges (Slide transition will be set to "Fade")

style

"round"
"square"
"butt"

The HTML5 Canvas lineCap style

blur

true
false

Auto-Blur the slide's main bg image

scaleblur

false
true

Blur value will be adjusted as the slider resizes

responsive

false
true

Scale the brush size as the slider resizes

disappear

true
false

Choose if the paint should fade away after drawing

carousel

false
true

Choose if using "Carousel" Slider Type

<li data-transition="fade"


data-revaddonpaintbrush='{

"size":200,
"origsize":200,
"blurAmount":10,
"fadetime":600,
"image":"assets/images.jpg",
"edgefix":10,
"fixedges":true,
"style":"round",
"blur":true,
"scaleblur":false,
"responsive":false,
"disappear":true,
"carousel":false
}'data-revaddonpaintbrushedges="1">


<img src="assets/paintbrush_bg2.jpg" class="rev-slidebg">





</li>