Riva Slider Pro

Created: 13/03/2012
By: Matthew Ruddy
Plugin Version:

Thank you for purchasing the Riva Slider Pro. If you have any questions not covered in this documentation, feel free to send a support request here and I will get back to you as soon as possible.

Table of Contents

  1. Installing the Plugin
  2. Displaying Slideshows
  3. Adding a Slideshow
  4. Duplicate a Slideshow
  5. Delete Multiple Slideshows
  6. Add an Image
  7. Link an Image to a Webpage
  8. Link an Image to a Video
  9. Adding Title & Text to an Image
  10. Change Preload Icon
  11. Pause Timer
  12. Direction Navigation
  13. Control Navigation
  14. Pause Button
  15. General Settings
  16. Auto-Play Settings
  17. Skins & Styling
  18. Advanced Settings
  19. Images From Posts
  20. Global Settings
  21. Backup All Settings
  22. User Permissions
  23. How to Update
  24. Frequently Asked Questions
  25. Changelog

A) Installing the Plugin - top

The Riva Slider Pro is very easy to install and can be installed via the Wordpress Admin's Plugins panel. Upon downloading the plugin, unzip the .zip file you have received. There, you will see two files:

  1. Documentation
  2. riva-slider-pro.zip

Installing the Plugin

Upload the riva-slider-pro.zip file via the Upload tab in the Plugins panel:

Upload Plugin

Finally, the plugin should show in the list of plugins in the Plugins admin menu. Activate it as you normally would. A new tab titled 'Slideshows' should now be visible.

Slideshows tab

B) Displaying Slideshows - top

In Posts

Displaying slideshows in posts is done very easily. In the Post Editor, navigate to the Slideshow Image metabox. You will see a button titled 'Insert a slideshow' with a drop-down menu above it. Select the slideshow you wish to insert into the post in the drop-down menu and click the button below. The appropriate slideshow will now be inserted into the post.

The slideshow has been inserted into the post

In Template Files

Slideshows can also be displayed in theme template files using the PHP function below. Replace the $id with the unique ID of the slideshow you wish to display.

<?php if ( function_exists( 'riva_slider_pro' ) ) { riva_slider_pro( $id ); } ?>

The unique ID's can be found here:

Here you can find each slideshow's unique ID.

Using a Widget

Riva Slider Pro has its own widget you can use to display a slideshow in a sidebar/widget area. Use the widget in the same fashion as you would use other widgets.

Riva Slider Pro widget

C) Adding a Slideshow - top

Adding a slideshow with the Riva Slider is very easy. To start, click the 'Add new' link within the 'Slideshows' tab.

Add new

This will bring you to the create a slideshow interface. Enter a name in the highlighted message box.

Enter a slideshow name

Now click the 'Create Slideshow' button. You will be prompted that the slideshow has been successfully created (unless there is an error). That's it.

D) Duplicate a Slideshow - top

To duplicate a slideshow, go to the 'Slideshow' admin tab. Here you can see all of your current slideshows. Hover over a specific slideshow, and click the 'Duplicate' link.

Duplicate Slideshow

E) Delete Multiple Slideshows - top

Deleting multiple slideshows in one go is possible with the Riva Slider. To do so, mark the slideshows you wish to delete by checking the checkboxes on the left have side fo the slider's name. Next, click the 'Bulk Actions' drop-down menu and select 'Delete'. Now click 'Apply', and the selected slideshows will be deleted one by one.

Select delete from the drop-down menu

F) Add an Image - top

To add an image to a slideshow, click the 'Add an Image' button when editing that slideshow.

Click the Add an Image button

Next, you will be presented with the Wordpress Media panel. It should automatically be viewing the Riva Slider Pro tab. Click the 'Use this Image' button on the image you wish to add.

Press the Use this Image button

The image should now be visible in the slideshow editor panel.

Image is now visible

To link an image to a webpage, click the image (in the slideshow editor) to edit the image's settings.

Click the image to edit settings

Under the 'Image', make sure 'Webpage' is selected from the option labelled 'Link Image Too''.

Make sure Webpage is selected

Now enter a webpage link into the option labelled 'Webpage URL' below the previous option. You must include 'http://' before the link in order for it to work..

Must include http:// before link

Before adding a video, it is important to note that only Youtube & Vimeo videos will work with the Riva Slider Pro. To add a video, click the image you wish to link the video too (in the slideshow editor).

Click the image to edit settings

Select 'Video' under the option labelled 'Link Image Too'. The 'Webpage URL' option will now disappear and the video options will replace them.

The video options will now appear

Now it is time to get our video's URL. The Riva Slider Pro automatically fetches the video from the video's webpage for you, so there is no complicated procedure to follow. Simply navigate to the page containing the Youtube or Vimeo video you want to link the image too, and copy its URL from the address bar in your browser.

Copy the address from your browser

Next, select whether you want the video to automatically play when loaded via the 'Auto-play' option, and if you would like to display related videos once the video has ended via the 'Related Videos' option (Youtube only). Lastly, you can set the position of the play video button via the option labelled 'Button Position'. Save your slideshow's changes, and that image should now display a video when clicked in the slideshow.

Slideshow image is now linked to a video

I) Adding Title & Text to an Image - top

Adding a title and/or text to an image is very straight-forward. As usual, click the image you wish to add the title/text to. This will open up the image's settings.

Click the image to edit settings

Now navigate to the 'Text' tab. Here you will see the various text options including the text overlays positioning, background colour, text colour alongside the title & text options themselves.

Here you will see the various text options

To change the text's background colour and text colour, you can use the colour-picker tool provided by clicking the icon to the right of the options labelled 'Background Colour' and 'Text Colour'.

The colour picker tool allows you to select colours easily.

Your title and/or text should now appear on the appropriate slideshow image.

Your text should now be shown on the appropriate image

J) Change Preload Icon - top

Riva Slider Pro provides you with multiple options for changing the preload icon displayed when the slider is loading (if enabled). To change it, go to the 'Preloading' tab in the slideshow editor. Find the option labelled 'Preload Icon' and press the 'Show the options' button.

Press the button to show the options

Click the preload icon you would like to use and it will become selected.

Select the icon you wish to use

With the Riva Slider Pro, you can also add your own preload icons. This can be done by adding the custom icon to the images/loading folder inside the plugins files.

Here I have added my custom icon

Only .jpg, .jpeg, .gif & .png images are compatible. Try to keep them to a maxium height & width of 24px ideally, but this is not necessary. As you can see below, the icon now appears within the various preloading icon choices.

The custom icon is selected.

K) Pause Timer - top

The Pause timer is the scrolling bar displayed at the bottom of the slider indicating the time remaining before the next transition. It can be enabled or disabled from within the 'Transitions' tab inside the slideshow editor.

Pause Timer (highlighted). Over of the Pause Timer admin options.

L) Direction Navigation - top

The Direction Navigation can be managed through the 'Navigation' tab within the slideshow editor panel. You can choose to only show it when the user hovers over the slideshow, or permanently. It can also be positioned inside or outside the slideshow itself.

Direction Navigation (highlighted). Overview of the Direction Navigation admin options

M) Control Navigation - top

The Control Navigation are the icons/numbers/thumbnails used to represent each individual image in the slideshow. They also highlight the image that is currently being shown, and allow the user to jump from image to image with ease.

Control Navigation

You can choose which index type of control navigation you would like to display through the 'Navigation' tab in the slideshow editor, along with some other options such as the positioning.

Choose the index type of control navigation you wish to use.

When thumbnails are selected, the 'Thumbnail Width' and 'Thumbnail Height' options will appear. You can use these to adjust the width and height of each individual thumbnail.

Thumbnail width and height options should appear

N) Pause Button - top

The Pause Button is used to pause the slideshow from transitioning. I can be enabled or disabled from within the 'Navigation' tab in the slideshow editor. You can also choose to only show it when the user hovers over the slideshow, or permanently.

Pause Button (highlighted). Overview of the Pause Button admin options

O) General Settings - top

The General Settings can be managed from within the 'Settings' tab in the slideshow editor panel. Here you can control the width and height of the slider, the start image, the image order, the name and description (for your own reference).

General Settings admin overview

P) Auto-Play Settings - top

The Auto-Play Setitings can be controlled from within the 'Settings' tab in the slideshow editor panel. You can choose to disable auto-play, only play through the slideshow images once and/or only display the navigation icons once all the images have been shown.

Auto-Play Settings admin overview

Q) Skins & Styling - top

Riva Slider Pro makes it easy to create individually styled slideshows. Skins allow complete control for designers to use their own images and CSS to style the slideshow. Not only this, but the Riva Slider Pro also comes with an innovative and completely customizable styling interface that allows you to make your slideshow unique without having to touch any code at all.

Skins & Styling admin overview

To use the custom styling interface, set the option labelled 'Select a Skin' to 'Custom'. The Styling Directory will now appear.

Styling Directory should now appear

Now select the part of the slideshow you wish to style by selecting it through the drop-down menu that currently is set to 'Select A Section' (as seen above). As an example below, I have chosen the 'Direction Navigation'. It's styling options have now appeared.

The Direction Navigation styling options have now appeared.

Adding your own Skin:

If you wish to add your own Skin to the Riva Slider, follow these steps.

  1. Create a new folder inside the plugins styles/skins folder. Create a new folder
  2. Inside the new folder, create a file called style.css. Do not name it anything else. Create a CSS file called style.css
  3. Open/edit the style.css file, and add the following to the top of it (above all CSS):
    /* Skin Name: My Custom Skin */
    You may replace the words My Custom Skin with the name of your skin. This is the name that will appear in the 'Select a skin' drop-down menu mentioned above.

Your custom skin should now be selectable in the 'Select a skin' drop-down menu (like below).

Your preset should now be availabe to select.

Due to the dynamic nature of the Riva Slider Pro's CSS, there are some custom-made constants that can be used in your custom skin's style.css file that will be replaced dynamically. These are as follows:

R) Advanced Settings - top

The Advanced Settings tab allows you to Backup that slideshow. It can be found in the 'Advanced' tab in the slideshow editor panel.

Advanced Settings admin overview

To import slideshow settings, copy the Export code from a different slideshow. Next, paste them into the 'Import' textarea of the slideshow you want to import the settings too. Now click the 'Save Changes' button and the settings will be imported. You should see a success message if all goes well.

You will see a success message when settings have been imported.

S) Images From Posts - top

Riva Slider Pro allows you to choose between using the Images Panel in the slideshow editor, or Images From Posts.

Images From Posts

Selecting this option will disable the Images Panel.

Images panel is now disabled

The slideshow will now get its images from posts. The dropd-down menu currently set to 'All Categories' can be changed to a specific category if you wish. If so, the slideshow will only get images from that category only. However, first we have to make sure that atleast one of the posts has slideshow images set to them.

Setting a slideshow image in a post

To set a slideshow image within a post, we first must edit the post in which we wish to do so.

Slideshow Image metabox in post editor.

Click the 'Insert an image' button. The Wordpress Media panel will show, which should automatically be viewing the Riva Slider Pro tab. Find the image you wish to use and click 'Use this Image'.

Select the image you wish to use.

The image will now be inserted in the Slideshow Image metabox. Make sure you save the post. The image should now show in the appropriate slideshow(s) set to Images from Posts.

The selected image should now be visible within the post editor.

Linking image to webpage's and video's is done in the same way when using Images from Posts. As you can see above, you can edit all the Slideshow Image's settings from within the metabox similar to the way you would when using the Image Panel.

T) Global Settings - top

The Global Settings tab allows you to control what scripts are being loaded, and also provide you with some other information about your site and plugin version. It is often useful to quote the 'Installation Settings' values when making a support request over an issue you may be having.

Serial Code

Don't forget to enter your Serial Code if you wish to receive update notifications and have access to them. The plugin will work without the Serial Code, but it is a good idea to keep as up to date as possible. The Serial Code is the same code as the Paypal Transaction ID of your purchase (of the plugin).

Global Settings admin overview

U) Backup All Setting - top

To export plugin settings, click the 'Export Plugin Settings' button in the 'Global Settings' admin menu. This prompt your browser to download a .txt file contains all your Riva Slider Pro settings.

Export plugin settings option

To import plugin settings, paste the code from the download export file into the "Import" textbox. Then click the 'Save Settings' button and the settings will be imported.

Import plugins settings and slideshows

V) User Permissions - top

Riva Slider Pro comes with various custom user permissions that allow you to manage what user roles can view and edit certain pages of the plugin. These are as follows:

The permissions assigned to each User Role can be managed by the Members plugin.

W) How to Update - top

Updates are distributd in the same way as all other Wordpress.org plugins. The 'Global Settings' admin menu will also notify you. If you see an update message, click the 'plugins' link.

Plugins Update Link

This will take you to the Plugins admin menu. To begin the upgrade, click the 'updade automatically' link.

Update Available

The plugin will then be automatically updated. Once completed, the update is complete!

Plugin Updated
New Plugin Version

X) Frequently Asked Questions - top

My slideshows are continually loading. What is going on?

This is a common problem that occurs when another plugin/theme is loading jQuery incorrectly. There are a couple of things you can try before making a support request.

If all of the above fail and the problem still persists, contact us providing a link to the page with the malfunctioning slideshow on it and we will get back to you as quickly as possible with a fix.

All of my slideshows look distorted/incorrect. How can I fix it?

Generally visual issues with the plugin are caused by CSS conflictions from the theme or other plugins. This problem is most easily fixed if you contact us straight away, unless you wish to tackle the problem yourself. These issues are very quick fixes and reporting them to us will allow us to prevent them from occurring in future updates of the plugin.

I have added my images correctly, but all of the images are appearing broken in the slideshows.

This is a problem often caused by the hosting company you are using. Some hosting companies by default have GD_Library disabled (such as Hostgator). GD_Library is required for the Timthumb Image Resizing script to function correctly.

A temporary fix to this issue is to disable automatic image resizing within the plugins 'Global Settings' page (within the 'Slideshows' admin menu). Set Enable Image Resizing to false. This will stop the plugin from resizing your images, which may make them look distorted or too big/small for the slideshow. It would be advised in this scenario that you use images that have the same dimensions as the slideshow itself to achieve the best looking effect.

A permanent solution would be to contact your hosting companies support. Ask them to enable GD_Library on your hosting. This should be no problem. When done correctly the broken links issue will no longer occur and your images will now automatically be resized to fit the slideshow.

Can I translate the plugin into my own language?

With the Riva Slider Pro, yes you can! The plugin comes with a .po file you can use to translate the plugin into your own language. However, support for foreign languages is not provided. Issues that may occur in the translation process are not our responsibility and we will not be able to assist you. We understand that it may be difficult to comprehend some of the functionality when your first language isn't English. If you are having such problems, please contact us and we will try our best to explain it in simple terms to you.

How do I update my plugin?

Updates are distributed in the same fashion as plugins from WordPress.org. When an update is released, WordPress will notify you from the "Plugins" admin panel.

How will I receive plugin updates?

Plugin updates will be annouced via our Twitter page, so please follow us. WordPress will also notify you of plugin updates (like it does for all other WordPress.org plugins) via the "Plugins" admin panel.

Can I upgrade my license?

Yes, upgrading your license is no problem. The upgrade cost will be determined by the price of the license you wish to upgrade too minus the price of the license you have already purchased. To upgrade, contact us. Don't forget to state the license you currently possess followed by your previous purchase information.

Which browsers are supported?

The Riva Slider Pro is currently supported by the following browsers:

It is also only supported by Wordpress v3.0 or greater.

Y) Changelog - top