Step 1: Prepare your images

This works best if all the images have the same dimensions. If they are different sizes you should at least crop them to have the same aspect ratio (relation of width to height) so that they fill the slider window when they are displayed.

Step 2: Select your images with the image slider wizard

In HelpXplain, select New in the File menu and then click on the Image Slider tool.

In the dialog shown, select the images you want to include. You can select multiple images or one image at a time. The wizard will go on asking you for more images until you're ready.

When you are finished the images for the slider are shown in the workspace.

Step 3: Enter the title and caption information

Select Properties in the File menu and enter a title, the name of the publisher and a description.

Optional: Change the background color

By default image sliders have a dark background that provides good contrast for presenting images and graphics.

If you want to change this click on Slides Overview in the Slides list on the left, then open Size & Background in the Properties pane on the right. Use the color picker under the Background heading to select black (usually best) or another dark color for the slide background. See Size & Background for more information if you are interested.

Optional: Adjust the image size

If an images isn't a good fit you can resize it. See Cropping Images... further below for instructions.

Step 4: Publish (create) your image slider

Select Publish in the File menu.

Click on the Format: bar at the top and select HTML Slideshow as the format to publish.

Choose an EMPTY output folder with the [..] browse button in the Output File: field. This is important because the output contains multiple files and folders.

Select your configuration options. See the Publish dialog reference if they are not self-explanatory.

Before clicking on Publish, make sure that the In Master Page button is selected. This shows how the slider will look in a real web page and includes a lot of useful information.

Click on Publish to generate and view your slider. Information on how to add it to a web page will be displayed there.

The images are displayed by inserting them in "slides" which are rectangular containers. The first slide defines the viewport dimensions of your Xplain (in this case the image slider) and all other slides will have the same size. This can be changed, but for an image slider the slides do all need to be the same size. Otherwise you will get unwanted zoom effects when the images slide into view.

Cropping an image

Select the slide containing the image in the Slides list on the left. Then click on the image in the workspace on the right to select it.

Select the Edit tool in the top right corner of the image and adjust the crop window. You can also drag the image inside the crop window to position it without moving the crop window. Then click on the check icon to apply. You can also select Crop in the Picture Tools/Image menu.

Cropping is non-destructive. It only hides the parts of the image you don't want to use.

Adjusting an image that does not fit or fill the slide

Select the slide containing the image in the Slides list on the left.

Click on the image in the workspace on the right to select it.

Right-click on the image and select one of the options in the Size context menu:

Choosing the Fit Picture to Slide option will clip the image as required if its aspect ratio does not fit.