Video Demonstration ( skip the reading, just watch and learn! )

Replace an image

The default size is the also the max width that will be displayed in the page.

If your replacement images are larger than the default width ( in the above example, that would be the 900 ), they will scale down to that size when viewed in the page.

Import, or drag your replacement images into the ‘images’ folder.

As with replacing any image, you can simple rename your replacement image the same as the image it’s replacing, so you only need to drag and drop it into the same folder, to over write

( example )

Or give it a unique, identifiable name of it’s own.

Open the ‘nivo-slider’ Library page.

Locate the image you want to change.

Double click to open the Picture Properties window.

Click the Browse button.

Browse to your Library >> sliders >> nivo-slider >> images (folder).

Select the imported image.

Click the Open button.

Then click OK.

You should see your new image on your page.

As with all images replaced using the Picture Properties panel, double click on the new image to open the panel back up.

This time, click the Appearance Tab.

Unselect the ‘Specify size’ option.

Then click OK.

This will remove any width and height properties, allowing the image to scale on mobile devices.

Add or remove an image

To add new images, it’s basically copy and paste an existing image, then use the ‘replace’ method shown above, to replace the image.

Open the ‘nivo-slider’ Library page.

Switch to Code view.

Select one of the <a > tags, and the entire line of code, for one of the existing images.

Copy, then paste once for each new image you’d like to add.

Change the title ( #image4 )

Keeping the numbers in sequence.

If you were to paste 4 additional images, it would look like so.

Move down the page a bit, so you can copy and paste the ‘caption’ containers for each new image.

Copy a container, and paste, like above, paste once for each additional image.

If adding a total of 4 new images you would paste 4 times:

And as we did with the first bit of code we copied and pasted, we need to change the ( image4 ) to match the id above

Like this:

Just to make things a bit easier to identify for the next step, updating the captions, change the reference for Image 4, bracketed in the <strong> tags:

To match the image number.

So when you change to Design view, the captions are listed in sequence as well.

Now we can Switch back to Design view, and replace the images as shown in the first tutorials ( Replacing images ).

And update the captions for each image. As we’ve already changed some of the image captions to help identify them in the Design window, it’s just a matter of changing the text to suit your needs for each image.

Remove an image

Switch to code view

Select the entire line of code for the image you want to remove.

Press delete on the keyboard.

You won’t need to remove the captions, if you don’t want to. The captions are loaded in according to the ( title ) if a caption ( id= ) matches an image ( title ), the caption will displayed. If not, it won’t be displayed.

Change the image Size

You can only change the max size as the nivo slider will adapt to any image less than the max width.

Add or remove an image

Video Demonstration ( skip the reading, just watch and learn! )

To add new images, it’s basically copy and paste an existing image, then use the ‘replace’ method shown above, to replace the image.

Open the ‘nivo-slider’ Library page.

Switch to Code view.

Select one of the <a > tags, and the entire line of code, for one of the existing images.

Copy, then paste once for each new image you’d like to add.

Then paste ( Ctrl+V ). Once for each new slide.

Change the title ( #image4 ) title in the pasted line, to ( #image5 )

… to #image5 .. Keeping the ‘title’ numbers in sequence.

If you were to paste 4 additional images, it would look like so.

Move down the page a bit, so you can copy and paste the ‘caption’ containers for each new image.

Copy a container, and paste, like above, paste once for each additional image.

If adding a total of 4 new images you would paste 4 times:

And as we did with the first bit of code we copied and pasted, we need to change the ( image4 ) to match the id above

Now we can Switch back to Design view, and replace the images as shown in the first tutorials ( Replacing images ).

And update the captions for each image. As we’ve already changed some of the image captions to help identify them in the Design window, it’s just a matter of changing the text to suit your needs for each image.

Remove an image

Switch to code view

Select the entire line of code for the image you want to remove.

Press delete on the keyboard.

You won’t need to remove the captions, if you don’t want to. The captions are loaded in according to the ( title ) if a caption ( id= ) matches an image ( title ), the caption will displayed. If not, it won’t be displayed.