nivo-slider

Nivo Slider

This is probably the most common slider on the web, these days. Learn how to update all the images and captions.

Tips


Instructions

Nivo Slider

In this tutorial, we’ll demonstrate how to:

  • replace an image
  • add / remove an image
  • change the caption
  • change the image size
  1. the Nivo Slider is a responsive image slider
  2. images larger than the max width will scale to fit
  3. images smaller than max width will display in their full width and
    height in the page

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

http://youtu.be/n1pfCuoJUFc

Replace an image

  1. Expand the Library >> sliders >> nivo-slider >> images (folder).
  2. Select an image, and view the default image size.
  3. The default size is the also the max width that will be displayed in the page.
  4. 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.
  5. Import, or drag your replacement images into the ‘images’ folder.
  6. 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
  7. ( example )
  8. Or give it a unique, identifiable name of it’s own.
  9. Open the ‘nivo-slider’ Library page.
  10. Locate the image you want to change.
  11. Double click to open the Picture Properties window.
  12. Click the Browse button.
  13. Browse to your Library >> sliders >> nivo-slider >> images (folder).
  14. Select the imported image.
  15. Click the Open button.
  16. Then click OK.
  17. You should see your new image on your page.
  18. As with all images replaced using the Picture Properties panel, double click on the new image to open the panel back up.
  19. This time, click the Appearance Tab.
  20. Unselect the ‘Specify size’ option.
  21. Then click OK.
  22. 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.

  1. Open the ‘nivo-slider’ Library page.
  2. Switch to Code view.
  3. Select one of the <a > tags, and the entire line of code, for one of the existing images.
  4. Copy, then paste once for each new image you’d like to add.
  5. Change the title ( #image4 )
  6. Keeping the numbers in sequence.
  7. If you were to paste 4 additional images, it would look like so.
  8. Move down the page a bit, so you can copy and paste the ‘caption’ containers for each new image.
  9. Copy a container, and paste, like above, paste once for each additional image.
  10. If adding a total of 4 new images you would paste 4 times:
  11. 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
  12. Like this:
  13. 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:
  14. To match the image number.
  15. So when you change to Design view, the captions are listed in sequence as well.
  16. Now we can Switch back to Design view, and replace the images as shown in the first tutorials ( Replacing images ).
  17. 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

  1. Switch to code view
  2. Select the entire line of code for the image you want to remove.
  3. Press delete on the keyboard.
  4. 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.

To change the max width:

  1. Expand the Library >> sliders >> nivo-slider >> css (folder).
  2. Open the ‘nivo-slider.css’ stylesheet.
  3. Locate the ‘max-width’ property for the ( .nivoSlider ) style.
  4. Change the max width to suit your needs.
  5. Make sure to keep the px when you change the max-width number.

Nivo Slider

  1. the Nivo Slider is a responsive image slider
  2. images larger than the max width will scale to fit
  3. images smaller than max width will display in their full width and height in the page

Change the Caption

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

http://youtu.be/5sW5T4t6mzI

Replace an image

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

http://youtu.be/qVl7MTH2C0w

First thing we want to do is determine a size for our replacement images. It’s best to use the same size as the default images that came with your template.

To determine the default image size:

  1. Expand the Library >> sliders >> nivo-slider.
  2. Double click the ‘nivo-slider.lbi’ page to open.
  3. Double click on one of the images on the ‘nivo-slider.lbi’ page to open the Image Source window.
  4. The default image size is displayed on the right, under the image thumbnail.
  5. 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.
  6. Import, or drag your replacement images into the ‘images’ folder.
  7. 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
  8. ( example )
  9. Or give it a unique, identifiable name of it’s own.
  10. Open the ‘nivo-slider’ Library page.
  11. Double click on the image you want to change, to open the Image Source window.
  12. Select the replacement image.
  13. Click the OK button.
  14. You should see your new image on your page.

Add or remove an image

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

http://youtu.be/KUTX1iCIajg

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

  1. Open the ‘nivo-slider’ Library page.
  2. Switch to Code view.
  3. Select one of the <a > tags, and the entire line of code, for one of the existing images.
  4. Copy, then paste once for each new image you’d like to add.
  5. Then paste ( Ctrl+V ). Once for each new slide.
  6. Change the title ( #image4 ) title in the pasted line, to ( #image5 )
  7. … to #image5 .. Keeping the ‘title’ numbers in sequence.
  8. If you were to paste 4 additional images, it would look like so.
  9. Move down the page a bit, so you can copy and paste the ‘caption’ containers for each new image.
  10. Copy a container, and paste, like above, paste once for each additional image.
  11. If adding a total of 4 new images you would paste 4 times:
  12. 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
  13. Now we can Switch back to Design view, and replace the images as shown in the first tutorials ( Replacing images ).
  14. 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

  1. Switch to code view
  2. Select the entire line of code for the image you want to remove.
  3. Press delete on the keyboard.
  4. 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.

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

http://youtu.be/ylEQ29tOvXM

  1. You can only change the max size as the nivo slider will adapt to any image less than the max width.
  2. To change the max width:
  3. Expand the Library >> sliders >> nivo-slider >> css (folder).
  4. Open the ‘nivo-slider.css’ stylesheet.
  5. Locate the ‘max-width’ property for the ( .nivoSlider ) style.
  6. Change the max width to suit your needs.
  7. Make sure to keep the px when you change the max-width number.

Troubleshooting

  • When hitting the power button, I lose all my unsaved work. Answer