Riva Slider Pro

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

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.

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:

Documentation
riva-slider-pro.zip

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

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.

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.

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.

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

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.

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.

F) Add an Image - top

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

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.

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

G) Link an Image to a Webpage - top

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

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

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..

H) Link an Image to a Video - top

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).

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

To use the custom styling interface, set the option labelled 'Select a Skin' to 'Custom'. The Styling Directory will 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.

Create a new folder inside the plugins styles/skins folder.
Inside the new folder, create a file called style.css. Do not name it anything else.
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:

[url] - This will be replaced with the URL of the folder containing the current styling preset.
[timthumb] - Will be replaced by the URL of the timthumb image resizing script (if enabled).
[shadow_width] - Replaced with the width of the shadow's image, dynamically resized to fit the slideshow (if enabled).
[shadow_height] - The same as above, except replaces with the shadow's height instead of the width.

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.

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.

Selecting this option will disable the Images Panel.

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.

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'.

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).

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.

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.

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:

rivasliderpro_view_slideshows - view the list of slideshows and the 'Slideshow Editor' screen.
rivasliderpro_edit_slideshows - edit and save slideshow settings.
rivasliderpro_view_addnew - view the 'Add New' slideshow page (but not create).
rivasliderpro_edit_addnew - actually create a new slideshow.
rivasliderpro_view_global_settings - view the 'Global Settings' menu.
rivasliderpro_edit_global_settings - edit and save changes to 'Global Settings'.
rivasliderpro_view_metabox - view 'Slideshow Image' post metabox within post/page editor.
rivasliderpro_edit_metabox - edit and save changes to 'Slideshow Image' post metabox.
rivasliderpro_view_serial_code - gives ability to see the Serial Code in the 'Global Settings' menu.

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.

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

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

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.

Disable jQuery within the 'Global Settings' tab in your administration panel (within the menu sub-menu titled 'Slideshows').
Set the scripts to load in your websites footer from within the 'Global Settings' tab also.
Disable all other plugins and/or temporarily change your theme. If this fixes the issues, re-enable each plugin one-by-one until you enable the plugin that breaks it. Then contact us and don't forget to mention the plugin causing the issue.

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:

Internet Explorer 7 or higher
Firefox 3 or higher
Safari 4 or higher
Google Chrome 3 or higher
Opera 10 or higher

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

Y) Changelog - top

v1.0.5.2

Fixed: Video button not showing when two slideshows or more slideshows on the same page have videos.
Fixed: Exclusion of 'opacity' option when adding an image using posts.
Fixed: Opacity bug that would make it display at 0.1 when value of 100 was entered.

v1.0.5.1

Fixed: Videos in slideshow broken by v1.0.5 update.
Fixed: Additional formatting issue in slideshow.php.

v1.0.5

Fixed: Formatting issue with themes that use their own formatting filters
Fixed: Conflicts with other plugins when saving settings
Added: Widget support.
Added: Better checking for user capabilities
Added: Capabilities are now removed when plugin is uninstalled
Added: Option that stores plugin version. This will help plugin detect when it has been updated
Changed: Replaced admin_init action with page specific actions in admin/functions.php
Changed: Better error checking for 'riva_slider_pro_dimensions' function. More likely to succeed.
Changed: Display of Control Navigation before slideshow has been loaded (Javascript changes).

v1.0.4

Added: User Capabilities
Added: Alert message before resetting all settings
Added: Added nonce checks to save, delete single, delete bulk & duplicate
Added: Plugin will now conditionally load scripts only when slider is used
Changed: Removed Ajax from delete, bulk delete and duplicate. Plugin no longer Ajax dependent
CSS: Added CSS properties to riva.slider.pro.css for iframe
CSS: IE7 fixes added to main CSS file & IE7 file removed
CSS: IE classes added to admin area for IE7, IE8, IE9
Fixed: Shadow URL when using 'Custom' styling & Multi-site
Fixed: Serial code will now get removed if invalid & using Multi-site
Fixed: Dimensions error when using Custom Styling with no shadow image
Fixed: Global settings not saving for some users
Fixed: Error checking to update-check.php file incase wp_remote_post fails (due to SSL or other)
Fixed: Major changes to how riva_slider_pro_file_content works
Fixed: Youtube rel attribute
Fixed: Validated riva_slider_pro_image() in functions.php

v1.0.3

Added: Vimeo video support.
Added: Insert slideshow button into page editor.
Added: Automatic Update notification and distribution system.
Added: Show 'Direction Navigation' on hover or permanently.
Added: Serial Code functionality.
Changed: Included reference to ID when user is trying to show a slideshow that does not exist.
Changed: Plugin will now update (with new option values) any slideshow/global settings imported from a previous plugin version.
Changed: 'Global Settings' export function from textarea to button which links to file download. This is due to the large amount of characters.
Changed: Shortcode from "slideshow" to "rivasliderpro" because of compatibility issues and risk of conflicts.
Fixed: CSS issues with 'Control Navigation' not displaying as selected with 'Default' skin.
Fixed: Issue with 'Control Navigation' when using 'Custom' styling.
Fixed: Wordpress Network options not being created on every site. They were also not being created when the admin created a new blog.

v1.0.2.4

Fixed: Issue when duplicating a slideshow that would eventually stop the user from being able to create new slideshows (due to excessive backslashes).

v1.0.2.3

Changed: Code snippet for .live function in jquery.riva.slider.pro.js file to accommodate for jQuery version 1.4.2 or lower.
Backend: Fixed 'import' & 'export' Global Settings description text.
Backend: Added links to front-end admin bar: 'Slideshows' with drop-down menu and 'Slideshow' to 'Add New' drop-down menu.

v1.0.2.2

Fixed: Issue with Wordpress versions prior to 3.1.2.

v1.0.2.1

Added: Image text background 'Opacity' option.
Fixed: Slideshow text background transparency in IE8 & IE7.
Fixed: Slideshow buttons jagged edges in IE8 & IE7.
CSS: Added list-style-type: none; property to slideshow general styling.
Backend: Fixed 'Insert a slideshow' button in IE9.
Backend: 'Pause Button Position' option not being disabled when Pause Button itself is disabled.

v1.0.2

Added: 'Change image' button to image editor.
Added: 'Image Text' tab to custom styling editor.
Added: 'Reset CSS' and 'Reset Slideshows & Settings' buttons to Global Settings.
Added: 'Import & Export Global Settings' options in Global Settings menu. Allows user to backup and restore entire plugin.
Added: Option to post metabox that allows users to automatically get the link, title & text from the post.
Added: 'Random Order' option allowing slideshow image order to be randomized.
Changed: Admin CSS minor changes to accommodate changes.
Changed: 'Margin' input text in custom styling editor. Removed icons.
Backend: Support for Wordpress Multi-sites/networks.
Backend: Fixed issues with getimagesize() function for sites with URL file-access disabled.
Backend: Made alterations to the way the plugin gets its own directory url & path.
Backend: Fixed start image option inconsistencies.

Thank you for purchasing Riva Slider Pro. Your contribution greatly assists the development of the plugin. If you are stuck or require assistance, as mentioned above you can make a support request through this link. Overall, I hope you enjoy using this plugin.

Matthew Ruddy

Go To Table of Contents