WP Slidenotes

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:

Shortcode
[slidenote text="Click me!"]The Slidenote content goes here[/slidenote]

Result
Click me!The Slidenote content goes here

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 textThe text that will make the slidenote slide-in when clicked or hovered (depending on the setting). Can contain plain text and HTML.
• Slide fromWhere the slidenote will slide-in from.
• Launch EventWhich event should start the sliding effect.
• Slidenotes widthThe slidenotes width in px.
• Slidenotes heightThe slidenotes height in px.
• Slidenotes topThe distance in px between the slidenote and the top of the post/page content.
• Margin-InThe distance in px that the slidenote will move from the edge of the post/article content.
• Margin-OutThe distance in px that the slidenote will move from the edge of the post/article content. Useful to hide the slidenote when using CSS3 shadows.
• Close buttonWeather to show or hide the “close” button.
• Close button textThe text displayed in the close button.
• Close button alignClose button alignment inside the slidenote.
• Animation durationHow much time in miliseconds will the animation last.
• Autohide delayAutomatically hide the slidenote after the entered amout of miliseconds. Disabled if the value is “0”.
• Custom classAdds the entered text to the slidenote “class” attribute. Useful for CSS customization.

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]

More Examples

Image inside Slidenote

Click here. This slidenote contains an image

Image as slidenote trigger (click the image)

This slidenote was launched by clicking an image