Customization and usage

Table of contents


Animation modes

You can customize your slide-up box by adding special options to the shortcode:

mode="option"

Where values for “option” can be:

      • “bottom-up-full” (default)
      • “bottom-up-part”
      • “left-right”
      • “left-right-uncover”
      • “right-left”
      • “right-left-uncover”
      • “fade-in” (from v0.2)
      • “fade-out” (from v0.2)
      • “top-down-full” (from v0.2)
      • “top-down-part” (from v0.2)

Example:
[ slideupbox id="455" mode="bottom-up-full" title="Example" desc="Some text..." ]

Will translate into (without spaces next to the brackets):

Example

Example

Some text...

Adding new sliding boxes

See the instructions here.


Editing the appearance of your sliding boxes

You can customize the look of the slide covers by using the mode names as .cover classes in your CSS file, like in this example:

If it’s not enough of customization for you, since v0.2 you can add class=”something” to your slideupbox shortcode. This class will appear in the HTML markup as a class of the cover div, so you’ll be able to add custom CSS codes to it. Example:

[ slideupbox id="455" mode="bottom-up-full" title="Example" desc="Some text..." class="my_class" ]

In your CSS files:


Customize every slide

If you’d like to customize your sliding boxes one-by-one, you can simply do it by using their id (”#slideup_xx”, where xx is the image id in the WP database).


Using WP Slide-up Box in your theme files

Since v0.2, you can use the plugin in your template files. This way you can even automatize the use of the plugin. You can do it with the slideupbox( $arr ) function in your PHP code, where $arr is an associative array.

Example:

The ‘id’ parameter is obligatory as the plugin won’t show anything without it. All the other parameters are optional (the ‘target’ and ‘size’ parameters have been added in v0.3).

Result:


ALT attribute for the bottom image

Since v0.2, you can add the alt=”xy” parameter to your slideupbox shortcode, which will set the alt attribute of the img element behind the cover div.

Code:
[ slideupbox id="455" alt="Some alternative text" ]

If not set, the title of the box will be used as the alt text by default.

« Next: Installation and Setup | Next: Download »