Blur Slider

The Blur Slider is a fullscreen background slider, combined with the Default slider to display a slightly blurred out version of the Default Slider image in the header background.

Instructions

Blur Slider Component

The Blur Slider Component is really designed to compliment and work with the Default Slider component ( also referred to as the Amazing slider ). The Blur Slider component uses the exact same base coding as the Default slider so it’s fairly easy to keep the updates consistent, and the timing of the sliders the same.

The Blur Slider component will load any sized image into the page, and display that image at full screen. To get the ‘best’ overall effect though, we’ll demonstrate how to resize your replacement images, then apply the blur effect. And we’ll do this all online, no fancy or confusing software to install. The replacement images will be resized to:

  • 880 pixels wide
  • 440 pixels tall

This exact ratio of twice as wide as tall, works very well for covering all the different browser resolutions.

The ‘nice’ thing about the Blur Slider is because the image is going to be blurred out, you can pretty much take any resolution image, change it’s dimensions to 880×440 pixels, then blur it out ( following the instructions below ) and it’ll still look good in the web page!

The replacement image we’ll be using, will be copies of the images used in the Default slider.

Before you get started with your updates to the Blur slider, make sure you’ve updated the Default slider. The reason being is we’ll be making copies of the Default slider images, and we’ll also be copying the ‘code’ from one library page to the other, to keep things consistent ( and quick! ) ..

There are 3 steps to updating the Blur slider.

  1. Update your Default slider component, yup! That’s the first step.
  2. Copy then resize / blur the images.
  3. Copy the Default Slider code, paste into the Blur slider page.

Update your Default Slider

Here’s a link to the tutorials for updating the Default slider, once you’ve completed this update you can continue on to the next step.

Replacing Images

Now for the fun part, resizing and blurring the images.

Start by ‘copying’ the images from your Default Slider, into the ‘images’ folder for the ‘blur-slider’. You can copy these images any way you prefer. It’s easiest to just select all the images in the ‘images’ folder, right click, and select Copy, then click on the ‘images’ folder for the ‘blur-slider’ and right click and select ‘Paste’. Or just watch the video for some tips!

You may need to over write the included blur slider images if they names didn’t change.

Once you’ve copied the Default slider pics, into the Blur Slider ‘images’ folder, you can resize and blur them. You can do this with your favorite graphic editor, or just upload them to an online editor such as my favorite ( http://pixlr.com/editor/ ). To keep things simple and consistent lets use the same resources for now.

  1. Open a new tab in your web browser and go tohttp://pixlr.com/editor/
  2. Click the ( Open image from computer ) button.
  3. Browse to your ‘website’ folder, then the ‘Library / sliders / blur-slider / images (folder).
  4. And click on the first image you’d like to edit, then click the Open button.
  5. Once you have your image open in the editor, click on the “Filter” menu >> “Gaussian Blur”.
  6. Enter “50″ or any other number that you think will look good, you can test out different numbers, 50 seems to be a good number to start with.
  7. Then click OK to close the Gaussian Blur window and apply the effect to your image.
  8. Then click on the ‘File’ menu >> Save… option, to save the image back to your computer.
  9. Leave the default settings, making sure the Quality is set to 80, then click OK.
  10. A window will pop up, prompting you to Save As… , just save the image ‘back’ into your ( website / Library / sliders / blur-slider / images ) folder, to over write the existing image.
  11. And click Yes to over write when prompted.
  12. Repeat with the remaining images.

Here’s a video to demonstrate the entire process if you’d like to learn how to quickly do this online.

Updating the code

As we’re using copies of the Amazing slider images, we may as well just copy the code as well to save some time.

  1. Expand the Library / sliders / default-slider (folder).
  2. Open the ‘Default-slider’ Library page.
  3. Switch to code view.
  4. NOW, you’ll see two UL lists, the top list is for the large image displayed in your slider, the second list is used for the thumbnail images.. It just so happens that the code we need matches the ‘thumbnail’ code, exactly.
  5. Select the <li> links for the thumbnails and copy ( Ctrl+C )
  6. Expand the blur-slider (folder).
  7. Open the ‘blur-slider’ Library page.
  8. Switch to code view.
  9. Select the existing <li> tags
  10. Paste the copied tags over top.
  11. Save to update.
  12. Preview a page using the Blur Slider.

Blur Slider Component

The Blur Slider Component is really designed to compliment and work with the Amazing Slider component. The Blur Slider component uses the exact same base coding as the Amazing slider so it’s fairly easy to keep the updates consistent, and the timing of the sliders the same.

The Blur Slider component will load any sized image into the page, and display that image at full screen. To get the ‘best’ overall effect though, we’ll demonstrate how to resize your replacement images, then apply the blur effect. And we’ll do this all online, no fancy or confusing software to install. The replacement images will be resized to:

  • 880 pixels wide
  • 440 pixels tall

This exact ratio of twice as wide as tall, works very well for covering all the different browser resolutions.

The ‘nice’ thing about the Blur Slider is because the image is going to be blurred out, you can pretty much take any resolution image, change it’s dimensions to 880×440 pixels, then blur it out ( following the instructions below ) and it’ll still look good in the web page!

The replacement image we’ll be using, will be copies of the images used in the Amazing slider.

Before you get started with your updates to the Blur slider, make sure you’ve updated the Amazing slider. The reason being is we’ll be making copies of the Amazing slider images, and we’ll also be copying the ‘code’ from one library page to the other, to keep things consistent ( and quick! ) ..

There are 3 steps to updating the Blur slider.

  1. Update your Amazing slider component, yup! That’s the first step.
  2. Copy then resize / blur the images.
  3. Copy the Amazing Slider code.

Update your Amazing Slider

Here’s a link to the tutorials for updating the Amazing slider, once you’ve completed this update you can continue on to the next step.

Replacing Images

Now for the fun part, resizing and blurring the images.

Start by ‘copying’ the images from your Default Slider, into the ‘images’ folder for the ‘blur-slider’. You can copy these images any way you prefer. It’s easiest to just select all the images in the ‘images’ folder, right click, and select Copy, then click on the ‘images’ folder for the ‘blur-slider’ and right click and select ‘Paste’. Or just watch the video for some tips!

You may need to over write the included blur slider images if they names didn’t change.

Once you’ve copied the Default slider pics, into the Blur Slider ‘images’ folder, you can resize and blur them. You can do this with your favorite graphic editor, or just upload them to an online editor such as my favorite ( http://pixlr.com/editor/ ). To keep things simple and consistent lets use the same resources for now.

  1. Open a new tab in your web browser and go tohttp://pixlr.com/editor/
  2. Click the ( Open image from computer ) button.
  3. Browse to your ‘website’ folder, then the ‘Library / sliders / blur-slider / images (folder).
  4. And click on the first image you’d like to edit, then click the Open button.
  5. Once you have your image open in the editor, click on the “Filter” menu >> “Gaussian Blur”.
  6. Enter “50″ or any other number that you think will look good, you can test out different numbers, 50 seems to be a good number to start with.
  7. Then click OK to close the Gaussian Blur window and apply the effect to your image.
  8. Then click on the ‘File’ menu >> Save… option, to save the image back to your computer.
  9. Leave the default settings, making sure the Quality is set to 80, then click OK.
  10. A window will pop up, prompting you to Save As… , just save the image ‘back’ into your ( website / Library / sliders / blur-slider / images ) folder, to over write the existing image.
  11. And click Yes to over write when prompted.
  12. Repeat with the remaining images.

Here’s a video to demonstrate the entire process if you’d like to learn how to quickly do this online.

Updating the code

As we’re using copies of the Amazing slider images, we may as well just copy the code as well to save some time.

  1. Expand the Library / sliders / default-slider (folder).
  2. Open the ‘default-slider’ Library page.
  3. Switch to code view.
  4. NOW, you’ll see two UL lists, the top list is for the large image displayed in your slider, the second list is used for the thumbnail images.. It just so happens that the code we need matches the ‘thumbnail’ code, exactly.
  5. Select the <li> links for the thumbnails and copy ( Ctrl+C )
  6. Expand the Library / sliders / blur-slider (folder).
  7. Open the ‘blur-slider’ Library page.
  8. Switch to code view.
  9. Select the existing <li> tags
  10. Paste the copied tags over top.
  11. Save to update.
  12. Preview a page using the Blur Slider.Slider