Activating and Using the Flash Fader Header Slideshow Feature:

Video: Activating and using the Flash Fader feature

[Note: FlashFader is a free plugin for WordPress developed by Marcus Grellert. We are in no way claiming to sell it.  ProPhoto does come preconfigured to work out of the box with FlashFader.  We've already coded it into the page templates, created a custom javascript embedding code, and configured the css to allow dropdown menus to operate flawlessly over it.  The plugin is included in your ProPhoto download only to save you the step of downloading it yourself for free. If you love the plugin, consider stopping by his website and using the donate button.]

To activate the FlashFader header slideshow feature, follow these steps:

Step 1: Turn on the code that embeds the flash movie.

This is the only slightly tricky part of the activation process. In your WordPress site admin area, click on the "Design ('Presentation' in WP 2.3 and earlier)" tab and then the "Theme Editor" subtab. Select the file called "Header" from the list of available files on the right. You're going to need to find and edit two separate sections of code.

Scroll down a bit until you see this clearly marked section of code:

			
<!-- BEGIN FIRST EDIT FLASHFADER  -->  
 

<!-- uncomment next line/chunk to use FlashFader -->

<!--<script src="<?php bloginfo('template_directory') ?>/flashfader.js" type="text/javascript"></script>-->



<!-- END FIRST EDIT FLASHFADER -->

Uncomment the line of code by removing the "<!--" and "-->" from before and after it, indicated below in red

<!-- uncomment next line/chunk to use FlashFader -->

<!--<script src="<?php bloginfo('template_directory') ?>/flashfader.js" type="text/javascript"></script>-->

so that it looks like this:

<!-- uncomment next line/chunk to use FlashFader -->

<script src="<?php bloginfo('template_directory') ?>/flashfader.js" type="text/javascript"></script>

Next, scroll down a bit further and look for this code:

<!-- BEGIN LAST EDIT FLASHFADER -->


<!-- uncomment the next chunk/line if you want to use FlashFader -->
<!--<script type="text/javascript">FlashFader('<?php echo bloginfo('wpurl') ?>', '#FFFFFF');</script>--> 


<!-- LINE 92 -->

<!--delete next line/chunk if using FlashFader -->
<img src="<?php bloginfo('template_directory') ?>/images/header-masthead.jpg" height=250 width="980" />



<!-- END LAST EDIT FLASHFADER -->

Uncomment the line of code in the upper section by deleting the <!-- and -->. Then delete the line the entire line (may span two lines) indicated in the lower section. Bits of code to delete shown below highlighted in red:

<!-- uncomment the next chunk/line if you want to use FlashFader -->
<!--<script type="text/javascript">FlashFader('<?php echo bloginfo('wpurl') ?>, '#FFFFFF');</script>--> 


<!-- LINE 92 -->

<!--delete next chunk if using FlashFader -->
<img src="<?php bloginfo('template_directory') ?>/images/header-masthead.jpg" height=250 width="980" />

So that it looks like this:

<!-- uncomment the next chunk/line if you want to use FlashFader -->
<script type="text/javascript">FlashFader('<?php echo bloginfo('wpurl') ?>', '#FFFFFF');</script> 


<!-- LINE 92 -->

<!--delete next chunk if using FlashFader -->
 

Step 2: Activate the free FlashFader plugin

After editing and saving the "Header" file in your Theme Editor, navigate to the "Plugins" tab of your WordPress site admin area and see "Flashfader" as one of the available plugins. Click the "activate" button to activate it.

Then, click on the "Manage" tab of your WordPress admin area, and you should see a new tab called "Flashfader." Click on it.

Change the dimensions to 980 pixels wide and 250 pixels tall, and change any other settings as desired.

Be sure to change the dimensions, and then season to taste.

Finally, upload at least two images with the dimensions of 980px by 250px using the built in upload feature. Be sure to optimize these images to be as small as possible in terms of total file size, to help ensure fast page-load. If you're using Photoshop, I recommend exporting using the "Save for Web and Devices" menu option, and exporting a JPG set to around 80% quality.

Upload your images, but keep those file sizes as small as possible!

NOTE: When you are adding or subtracting new images from your flash movie, you may not see your changes immediately. This is because many browsers "cache" .swf files. English translation: many browsers download and save flash movies in a temporary folder to speed page loads. Your browser may be using an old version of your flash movie. To get around this, you can just wait a couple days, test in another browser, or force your browser to empty its cache.

 

Other Tutorials:

  1. Tutorial Overview
  2. What you need for ProPhoto
  3. Helpful general info
  4. Installing Wordpress
  5. Installing ProPhoto
  6. Customizing ProPhoto
  7. Changing colors, fonts and sizes
  8. Flash slideshow header feature
  9. Using Wordpress