default-slider

Amazing (Default) Slider

Often used as the "default" slider in many of our designs, the "Amazing" slider is a versatile component. Learn how to change everything from the captions and images to where the images link to.

Tips


Instructions

Amazing Slider

In this tutorial, we’ll demonstrate how to:

  • change the captions
  • replace / add / remove images
  • change the image size
  • link your images to pages
  • change the slide duration
  • change the animation type
  1. you can add more images than the default, or reduce the total number to suit your needs

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

http://youtu.be/LE7_YDzOPs0

Change the captions

  1. Expand the Library >> sliders >> default-slider folder.
  2. Double click on the default-slider.htm page to open.
  3. Switch the page to ‘Code’ view.
  4. You’ll see your large images listed in the first UL group, and the thumbnails listed in the second.
  5. Each of the main images includes an ( alt ) tag, with the title text wrapped in double quotes.
  6. To the right of the alt tag, is the data-description which contains the smaller image description text.
  7. Change the “Image 1-4 title” text to suit your images.
  8. Make sure to keep your text wrapped in the “… ” double quotes.
  9. If you don’t want a title, just leave the alt field blank as in this example ( leave the double quotes, just remove the text ).
  10. To change the description text, just edit the text with the ( data-description ) tag.

Replace images ( option 1 )

Before replacing your images, you’ll need to create new images. Refer to the tips section above to learn how to size and import images.

You can change the size of the images, for best results make sure they are all the same size. How they display in the web page may vary. It’s recommend to keep the replacement or new images the same size as the default images.

  1. The fastest way to determine an image size is to open the ‘images’ folder, located inside the ‘default-slider’ folder. Select an image, and it’s size and properties will be displayed at the top of the Folder List.
  2. There are two methods for replacing images.
  3. If you plan on using the same number of images, or just want to replace a few of the images, and keep the rest as default you can simple create your new image, match it’s size to the size of the default image, and name it the same as the default image.
  4. In this example, we’ve created a new image in our image editor.
  5. We’ve resized our replacement image to match the default image size of 900×280 ( your template will use different sizes, this is just an example ).
  6. We’ve renamed our replacement image, exactly the same as the image we want to replace.
  7. All we need to do, is drag our replacement image into the ‘images’ folder to over write the default image.. that’s it.
  8. Here we go, we want to replace the ‘second’ image in the sequence.. if we expand the following folder in our website.
  9. Library >> sliders >> default-slider >> images (folder).
  10. We can see the default images and their names.
  11. Conveniently they are named in sequence, so if we wanted to replace the second image in the slider
  12. we would be replacing the “portfolio-very-large-2.jpg”.
  13. All we need to do to keep things simple, is resize our replacement image to match the dimensions of the ( portfolio-very-large-2.jpg ), which is 900×280 pixels
  14. Then drag the replacement image into the same folder, to overwrite the existing image.
  15. When you drag the replacement image into the images folder, you should get the Confirm Save window popping up.
  16. Just click Yes, to overwrite the existing image.

Replace images ( option 2 )

You can also drag your replacement images into the images folder using your own naming convention.

Just remember the importance of naming image for the web ( the 4 rules, if missed the tips section ):

  • user lower case
  • do not allow spaces between words, use a hyphen ( – ) or an underscore ( _ ) to connect words
  • do not use punctuation
  • file extensions in lower case ( .jpg vs .JPG )
  1. Size your replacement images to match the default image size.
  2. Then drag your replacement images into the ( Library >> sliders >> default-slider >> images (folder).
  3. Double click on the default-slider.htm page to open.
  4. Now to replace an image, just locate the image on the page that you want changed.
  5. Double click on the image to open the Picture Properties window.
  6. Click the browse button.
  7. Browse to the ‘images’ folder, or the folder where you imported your images.
  8. Select your replacement image.
  9. Click the Open button.
  10. Then click OK.
  11. You’ll notice your new image now on the page.
  12. Double Click on the new image to open the Picture Properties window once again,
  13. then click the ( Appearance ) tab.
  14. Unselect the ( Specify size ) checkbox.
  15. Click OK to save.
  16. This is a pretty important last step if you’re concerned about mobile devices. Be default your web editor will ( add ) the image width and height properties. You don’t want that. The slider is repsonsive, meaning it will scale the images depending on the browser resolutions ( up to a maximum size that is, so the image isn’t larger than is actual size ). Mobile devices scale the image, allowing the image to be viewed on a mobile phone for example. If you allowed your web editor to include a fixed pixel width and height, your page wouldn’t resize correctly on mobile devices.
  17. You’ll also need to update the thumbnail image. Fortunately, the thumbnail pulls for the same image as the large image, so you only need to update the ‘link’ for the thumbnail.
  18. You can do this easily in the ‘Code’ view, is you just copy the name of your main image.
  19. Then paste it over the name of the thumbnail image.
  20. Continue with the rest of the images you want to replace.

Adding images

You’ll need to run through the 2 previous sections ( Replacing images ) as they play a major role when it comes to adding images.

  1. To add an image you just need to import your new images into the ( Library >> sliders >> default-slider >> images ) folder,
  2. once imported, open the ‘default-slider.htm’ page and switch over to Code view.
  3. You’ll need to copy an the link / code for an existing image, and paste that link / code for each additional image you’ll be adding.
  4. You’ll also need to do this for both the <!– main images –> and <!– thumbnail images –>
  5. To make things easier to follow, lets just add our new images so they load after the first 4, let’s add for more images
  6. Start by copying the link for the 4th image.
  7. ( it’s easiest to just click on the line number to the left, to select the entire line of code )
  8. With that line of code selected, press ( Ctrl+C ) on your keyboard to copy, or right click on the selected line, and click Copy.
  9. Now you’ll just need to paste ( Ctrl+V ) once for each new image.
  10. Now do the same for the Thumbnails below.
  11. Now that you’ve added your images, just switch back to the Design view window, scroll down the page until you find the first duplicate of your copied image.
  12. Double click on the image to open the Picture Properties window, and browse to the folder where your new images are located.
  13. Select your image, and press the Open button,
  14. then OK,
  15. ( hint: go through the tutorials listed above “Replacing images” for full details )
  16. continue this with your remaining images and thumbnails.

Change the image size

**NOTE** for this update, make sure ALL your images are the same size.

  1. Expand the Library >> sliders >> js (folder).
  2. Open the ‘initslider-1.js’ file.
  3. Change the width and height properties located on lines 11 and 12 ( or there abouts ).
  4. ( just use a number, no px or quotes required )

Link your images to pages

  1. Open your default-slider.htm page.
  2. Locate the image for which you’d like to change the link.
  3. Double click on the image to open the Picture Properties.
  4. Click the (Browse) button next to the existing hyperlinked page.
  5. Browse through your list of pages and select a new page or manually type the link into the
    Address: field
  6. Click OK, then OK.

Change the slide duration

  1. Expand the Library >> sliders >> js (folder).
  2. Open the ‘initslider-1.js’ file.
  3. Locate the ‘slideinterval’ setting ( about line 26 ).
  4. Change the default 5000 to a new interval in milliseconds, example:
  5. ( 5000 = 5 seconds / 10000 = 10 seconds )
  6. Save and close.

Change the animation type

  1. Expand the Library >> sliders >> js (folder).
  2. Open the ‘initslider-1.js’ file.
  3. Locate the ‘transition’ settings at the very bottom of the page.
  4. You’ll see a listing of transitions:
  5. When listing more than 1 transition effect, they will be randomized.
  6. You can remove the transition effects you don’t want to use, or remove all but the one you do want to use.
  7. Save, test in browser, then close when happy!

Amazing Slider

Change the captions

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

http://youtu.be/EiyMoQrag4I

  1. Expand the Library >> sliders >> default-slider folder.
  2. Double click on the default-slider.lbi page to open.
  3. Switch the page to ‘Code’ view.
  4. You’ll see your large images listed in the first UL group, and the thumbnails listed in the second.
  5. Each of the main images includes an ( alt ) tag, with the title text wrapped in double quotes.
  6. To the right of the alt tag, is the data-description which contains the smaller image description text.
  7. Change the “Image 1-4 title” text to suit your images.
  8. Make sure to keep your text wrapped in the “… ” double quotes.
  9. If you don’t want a title, just leave the alt field blank as in this example ( leave the double quotes, just remove the text ).
  10. To change the description text, just edit the text with the ( data-description ) tag.

Replace images ( option 1 )

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

http://youtu.be/Trt6QF4k3Sg

Before replacing your images, you’ll need to create new images. Refer to the tips section above to learn how to size and import images.

You can change the size of the images, for best results make sure they are all the same size. How they display in the web page may vary. It’s recommend to keep the replacement or new images the same size as the default images.

  1. There are several ways to check an image’s size, a quick method:
  2. Right click on the image in the ‘Local Files’ panel.
  3. Select Explore:
  4. This will open a Document Window, from which you can check the image dimensions.
  5. There are two methods for replacing images.
  6. If you plan on using the same number of images, or just want to replace a few of the images, and keep the rest as default you can simple create your new image, match it’s size to the size of the default image, and name it the same as the default image.
  7. In this example, we’ve created a new image in our image editor.
  8. We’ve resized our replacement image to match the default image size of 900×280 ( your template will use different sizes, this is just an example ).
  9. We’ve renamed our replacement image, exactly the same as the image we want to replace.
  10. All we need to do, is drag our replacement image into the ‘images’ folder to over write the default image.. that’s it.
  11. Here we go, we want to replace the ‘second’ image in the sequence.. if we expand the following folder in our website.
  12. Library >> sliders >> default-slider >> images (folder).
  13. We can see the default images and their names.
  14. Conveniently they are named in sequence, so if we wanted to replace the second image in the slider
  15. we would be replacing the “portfolio-very-large-2.jpg”.
  16. All we need to do to keep things simple, is resize our replacement image to match the dimensions of the ( portfolio-very-large-2.jpg ), which is 900×280 pixels
  17. Then drag the replacement image into the same folder, to overwrite the existing image.
  18. When you drag the replacement image into the images folder, you should get the Confirm Save window popping up.
  19. Just click OK, to overwrite the existing image.

Replace images ( option 2 )

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

http://youtu.be/Trt6QF4k3Sg

You can also drag your replacement images into the images folder using your own naming convention.

Just remember the importance of naming image for the web ( the 4 rules, if missed the tips section ):

  • user lower case
  • do not allow spaces between words, use a hyphen ( – ) or an underscore ( _ ) to connect words
  • do not use punctuation
  • file extensions in lower case ( .jpg vs .JPG )
  1. Size your replacement images to match the default image size.
  2. Then drag your replacement images into the ( Library >> sliders >> default-slider >> images (folder).
  3. Double click on the default-slider.lbi
  4.  page to open.
  5. Now to replace an image, just locate the image on the page that you want changed.
  6. Double click on the image to open the Picture Properties window.
  7. Click the browse button.
  8. Browse to the ‘images’ folder, or the folder where you imported your images.
  9. Select your replacement image.
  10. Click the Open button.
  11. Then click OK.
  12. You’ll notice your new image now on the page.
  13. Double Click on the new image to open the Picture Properties window once again,
  14. then click the ( Appearance ) tab.
  15. Unselect the ( Specify size ) checkbox.
  16. Click OK to save.

This is a pretty important last step if you’re concerned about mobile devices. Be default your web editor will ( add ) the image width and height properties. You don’t want that. The slider is repsonsive, meaning it will scale the images depending on the browser resolutions ( up to a maximum size that is, so the image isn’t larger than is actual size ). Mobile devices scale the image, allowing the image to be viewed on a mobile phone for example. If you allowed your web editor to include a fixed pixel width and height, your page wouldn’t resize correctly on mobile devices.

You’ll also need to update the thumbnail image. Fortunately, the thumbnail pulls for the same image as the large image, so you only need to update the ‘link’ for the thumbnail.

  1. You can do this easily in the ‘Code’ view, is you just copy the name of your main image.
  2. Then paste it over the name of the thumbnail image.
  3. Continue with the rest of the images you want to replace.

Adding images

You’ll need to run through the 2 previous sections ( Replacing images ) as they play a major role when it comes to adding images.

  1. To add an image you just need to import your new images into the ( Library >> sliders >> default-slider >> images ) folder,
  2. once imported, open the ‘default-slider.htm’ page and switch over to Code view.
  3. You’ll need to copy an the link / code for an existing image, and paste that link / code for each additional image you’ll be adding.
  4. You’ll also need to do this for both the <!– main images –> and <!– thumbnail images –>
  5. To make things easier to follow, lets just add our new images so they load after the first 4, let’s add for more images
  6. Start by copying the link for the 4th image.
  7. ( it’s easiest to just click on the line number to the left, to select the entire line of code )
  8. With that line of code selected, press ( Ctrl+C ) on your keyboard to copy, or right click on the selected line, and click Copy.
  9. Now you’ll just need to paste ( Ctrl+V ) once for each new image.
  10. Now do the same for the Thumbnails below.
  11. Now that you’ve added your images, just switch back to the Design view window, scroll down the page until you find the first duplicate of your copied image.
  12. Double click on the image to open the Picture Properties window, and browse to the folder where your new images are located.
  13. Select your image, and press the Open button,
  14. then OK,
  15. ( hint: go through the tutorials listed above “Replacing images” for full details )
  16. continue this with your remaining images and thumbnails.

Change the image size

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

http://youtu.be/9-ah8-vuor8

**NOTE** for this update, make sure ALL your images are the same size.

  1. Expand the Library >> sliders >> js (folder).
  2. Open the ‘initslider-1.js’ file.
  3. Change the width and height properties located on lines 11 and 12 ( or there abouts ).
  4. ( just use a number, no px or quotes required )

Link your images to pages

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

http://youtu.be/Kd1otQnSPEg

  1. Open your default-slider.htm page.
  2. Locate the image for which you’d like to change the link.
  3. Double click on the image to open the Picture Properties.
  4. Click the (Browse) button next to the existing hyperlinked page.
  5. Browse through your list of pages and select a new page or manually type the link into the
    Address: field
  6. Click OK, then OK.

Change the slide duration

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

http://youtu.be/9SsAIDNoKpU

  1. Expand the Library >> sliders >> js (folder).
  2. Open the ‘initslider-1.js’ file.
  3. Locate the ‘slideinterval’ setting ( about line 26 ).
  4. Change the default 5000 to a new interval in milliseconds, example:
  5. ( 5000 = 5 seconds / 10000 = 10 seconds )
  6. Save and close.

Change the animation type

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

http://youtu.be/4EQNihHL1ks

  1. Expand the Library >> sliders >> js (folder).
  2. Open the ‘initslider-1.js’ file.
  3. Locate the ‘transition’ settings at the very bottom of the page.
  4. You’ll see a listing of transitions:
  5. When listing more than 1 transition effect, they will be randomized.
  6. You can remove the transition effects you don’t want to use, or remove all but the one you do want to use.
  7. Save, test in browser, then close when happy!