RevFlicker

rev_flicker

RevFlicker is a touch enabled content carousel. Use it by placing an element along with the script and ad code definition on the page.

<div id="rev-flicker"></div>

<script src="http://labs-cdn.revcontent.com/build/revflicker.min.js"></script>

<script>
new RevFlicker({
id: 'rev-flicker',
api_key: 'api_key',
pub_id: 123,
widget_id: 456,
domain: 'mysite.com'
});
</script>

Options

Default values are shown.

api_key(required)

your api key

domain(required)

your widget domain

pub_id(required)

your pub id

widget_id(required)

your widget id

id(required if element is not used)

matches a div id on the page. For example to target <div id="my-flicker"></div>

id: 'my-flicker'

element(required if id is not used)

A jQuery wrapped element, will be used instead of id option

element: false

ad_border

Display a border around each ad

ad_border: true

square_border

Display square borders.

square_border: false

ad_overlay

Key value ad overlay config object where the key is the content type and the value is the icon to use. For example to use the video_rectangle icon for video content use video: 'video_rectangle'. The icon will be appended to the .rev-ad element.

ad_overlay: false

ad_overlay_position

The position of the ad overlay icon. Available options include center, top_left, top_right, bottom_right and bottom_left.

ad_overlay_position: 'bottom_right'

css

Additional CSS to append.

css: ''

devices

Devices to show on. Options include phone, tablet and desktop.

devices: [
'phone',
'tablet',
'desktop'
]

disclosure_text

Text to display for disclosure. This text triggers the disclosure/interests dialog on click.

disclosure_text: 'Sponsored by Revcontent'

dots

To show the pagination dots

dots: false

header

Text displayed above ads. Wrapped inside <h2 class="rev-header">.

header: 'Trending Now'

headline_size

Number of lines that the headline can take up. Ignored if max_headline is set to true.

headline_size: 2

hide_provider

Display the provider in the ads.

hide_provider: false

image_ratio

Ratio of the images. Available options include wide_rectangle, rectangle, square.

image_ratio: (revDetect.mobile() ? 'wide_rectangle' : 'rectangle')

hide_disclosure

Set true to not display the disclosure text.

hide_disclosure: false

hide_header

Set true to not display the headerl

hide_header: false

image_overlay

Key value image overlay object config where the key is the content type and the value is the icon to use. For example to use the video_rectangle icon for video content use video: 'video_rectangle'. The icon will be appended to the .rev-image element.

image_overlay: false

image_overlay_position

The position of the image overlay icon. Available options include center, top_left, top_right, bottom_right and bottom_left.

image_overlay_position: 'center'

internal

Number of internal ads to display. sponsored option is ignored and only internal ads are shown.

internal: false

max_headline

Show all of the headline for all ads. No ellipsis. This option overrides headline_size

max_headline: false

multipliers

Tweak sizing relative to the ad size. Can be negative values.

{
line_height: 0,
font_size: 0,
margin: 0,
padding: 0
}

next_effect

Allows the next/halved ad to have a slight transition.

next_effect: true

next_width

A fixed number of pixels for the next/halved ad. If set will override next_width_percentage

next_width: false

next_width_percentage

By default the next/halved ad will be 20% of the regular ad width. All ads will be resized after setting the next/halved ad width.

next_width_percentage: 5

overlay_icons

Pass in custom icons where the key is the icon name and the value is the svg icon. For example {article_square: '<svg></svg>'}. Default icons include video_rectangle, video_square, video_circle1, video_circle2 and video_triangle.

overlay_icons: false

per_row

Object or single value. Pass a single number to be used for every breakpoint or provide a value for each breakpoint.

per_row: {
xxs: 1,
xs: 1,
sm: 3,
md: 4,
lg: 5,
xl: 6,
xxl: 7
}

query_params

Key value object for query params to send to server. Can be multidimensional

query_params: false

The example below demonstrates how to pass subid values. The resulting query parameters will be ?revsub[key]=value

query_params: {
revsub: {
key: 'value'
}
}

rev_position

Position of the disclosure text if hide_disclosure is not enabled. Options include: 'bottom_right', 'top_right', 'bottom_left'.

rev_position: (revDetect.mobile() ? 'bottom_right' : 'top_right')

show_arrows

Show paging arrows for mobile devices or desktop.

{
mobile: false,
desktop: true
}

size

Set fixed size for various measurements.

{
margin: false,
image_height: false,
headline_line_height: false,
headline_margin_top: false,
provider_line_height: false,
provider_margin_top: false,
provider_margin_bottom: false,
inner_margin: false
}

sponsored

Number of sponsored ads to show. internal option overrides this value to only show internal.

sponsored: 10

text_overlay

Text will overlay the image rather than be position below it

text_overlay: false

text_top

Text will be positioned above the image

text_top: false

text_right

Text will be positioned to the right of the image

text_right: false

text_right_height

Value in pixels of the ad image if text_right is enabled

text_right_height: 100

url

Use an alternate API url

url: 'https://trends.revcontent.com/api/v1/'

user_agent

Pass user_agent param to API

user_agent: false

user_ip

Pass user_ip to API

user_ip: false

arrow_style

Next/Previous arrow style. Can be circle or square.

arrow_style: 'circle'

arrow_opacity

Next/Previous arrow opacity. Can be 0.1 - 1.

arrow_style: 1

trending

Show trending number count.

trending: false

trending_theme

Theme for trending. Can be default or social.

trending_theme: 'default'

window_width_devices

Devices to enable the full viewport/window width feature where the widget will stretch the entire viewport width.

window_width_devices: [
'phone', 'tablet'
]