WP Slidenotes Plugin

Slidenotes lets you add fancy sliding notes into your wordpress posts, pages or text widgets using a simple and customizable shortcode.
Click on the demo boxes to see some examples:

The Shortcode

The shortcode will create a hidden slidenote, also it will render the trigger text, which will make the slidenote slide-in into the content when clicked or hovered (depending on settings,  click by default).
The shortcode is controlled by several parameters. The paramaters default values can be set in the WP Slidenotes menu in your dashboard, this default values will be aplied to all the slidenotes shortcodes created, however a single or more parameters canbe overwritten by passing the parameter name and value to the shortcode directly:
[slidenote text="Click me!" width="200"]The Slidenote content goes here[/slidenote]

The Parameters

There are two ways to controll the shortcode parameters: Setting the default values in the WP Slidenotes admin menu, and passing parameters to the shortcode.

WP Slidenotes admin menu

Controls the General Slidenotes Settings and the Default Slidenotes Settings.
General Slidenotes Settings

• Slidenotes Default Style: Choose one of the presets for the slidenote appearance. You can choose “Custom” and edit the CSS for that style in the slidenotes.css file included.
• Animation Transition: The animation transition type.
• Animation FPS: The animation frames per second.

Default Slidenotes Settings
Hover each parameter to see its definition, yes! that’s made with SlideNotes!

• Trigger text
• Slide from
• Launch Event
• Slidenotes width
• Slidenotes height
• Slidenotes top
• Margin-In
• Margin-Out
• Close button
• Close button text
• Close button align
• Animation duration
• Autohide delay
• Custom class

Overwriting the default settings with inline Shortcode Parameters

• text: [slidenote text="My text"]slidenote content[/slidenote]
• from: [slidenote from="right"]slidenote content[/slidenote]
• event: [slidenote event="hover"]slidenote content[/slidenote]
• width: [slidenote width="200"]slidenote content[/slidenote]
• height: [slidenote width="150"]slidenote content[/slidenote]
• top: [slidenote top="50"]slidenote content[/slidenote]
• marginin: [slidenote marginin="50"]slidenote content[/slidenote]
• marginout: [slidenote marginout="50"]slidenote content[/slidenote]
• closebutton: [slidenote closebutton="no"]slidenote content[/slidenote]
• closetext: [slidenote closetext="Hide"]slidenote content[/slidenote]
• closealign: [slidenote closealign="left"]slidenote content[/slidenote]
• duration: [slidenote duration="1000"]slidenote content[/slidenote]
• autohide: [slidenote autohide="1000"]slidenote content[/slidenote]
• customclass: [slidenote customclass="my_css_class"]slidenote content[/slidenote]