Ajatix Image / Banner Rotator - Expression Web Add-In

This Banner/Image Rotator Expression Web add-in will let you add an eye-catching CSS / JavaScript banner rotator to your website pages without any hand coding. The program is meant to create a rotating banner image gallery where each image links to a particular web page (html, php, or asp) rather than a larger image. The images need to be the same size to start with so you need to go with either horizontal of vertical images and not a mixture.

"Chinese proverb. One picture is worth ten thousand words." Perhaps, a slideshow is worth a million.

System requirements and Cost

Microsoft Windows 7, Vista, XP, 2000
Microsoft Expression Web 4, 3(SP2), 2, 1.
Microsoft FrontPage 2003, 2002, 2000

Price: $49.95

Product Website to download trial or purchase.

Buy Now: Banner/Image Rotator Addin for Expression Web

Download Trial: Banner/Image Rotator Addin for Expression Web

Installing Ajatix Image / Banner Rotator

Expression Web Add-ins are easy to install. You can find detailed instructions for Installing Expression Web 4 Add-ins. Installing the Image / Banner Rotator Add-in to version 4 made it available for all versions of Expression Web and FrontPage 2003 on my computer. This Expression Web add-in will let you add a great-looking eye-catching CSS / JavaScript banner rotator to your pages without having to write a single line of code.

How to use the Image / Banner Rotator Add-in

The instructions and screenshots were taken using Expression Web 4 installed on a Windows Vista computer. Click any thumbnail to view a larger image.

Step 1: Open the page and place the cursor where you want the insert the Image Rotator. Choose Insert from the menu and select Ajatix, then Image/Banner Rotator. If this is a new project, select 'New from preset theme.'

Fig 1: Start Wizard

Step 2:You will see a selection of preset themes. Select the one that best suits your project. Image/Banner Rotator is fully customizable. You will be able to change the style, or apply a different theme any time later. You can see a preview of what the Image Rotator will look like. I selected 'Hawks.' Click the Apply button.

Fig 2: Select Theme

Step 3: Your Image/Banner Rotator can be used to display a group of images (banners). Add images to the Rotator by clicking the Add icon . Select the source image (Image Link) and, optionally, a caption and a link for each entry. Continue adding images till you have all that you want in the Gallery. Do NOT click the OK button until you have finished adding your images.

NOTE: The newest version adds a Rich Caption field. Rich Captions offers an optional alternative for the Caption allowing for using HTML markup

NOTE: You should edit your images before you start the project so they are the size you choose to display them as. Your images also need to be the same size and rotation (horizontal or vertical) but not mixed.

The images I was working with would not display in the Preview box. Not sure if it was the images themselves, my graphics card or what. NOTE: The Preview feature did work with Expression Web versions 1 and 2 BUT NOT versions 3 and 4.

Fig 3: New Image/Banner Rotator - Add images

Fig 3a: New Image/Banner Rotator - Add Images
Newest Version: Rich Caption option

Step 4: Customize your Rotator design by changing size, animation type, colors, navigation bar, caption styles in the Style Editor. When you have finished adding images and styling the rotator, click OK.

Fig 4: New Image/Banner Rotator - Style Editor

Step 5: You will be prompted to save the css file. Select the location and the name of the CSS file and click the Save button. I save the css file to the same folder where my other style sheets for a particular web are.

You can also save the Rotator style into a CSS file by selecting the Save Style command from the File menu. The saved CSS file can be re-used by other Image Banner Rotator on the same or different pages.

Step 6: The add-in will insert the rotator markup into the page.

Fig 5: HTML Markup inserted

Step 7: Preview the finished page in your browser. Validate your page. The rotator add-in creates Valid HTML and CSS - rotator markup complies with HTML, XHTML and CSS standards and passes W3C and Expression Web validity checks.

Sample Banner/Image Rotator: Travel Journals

Sample Banner/Image Rotator (styled to match the site design: Travel Journals

There is also an extensive Help menu available from within Banner/Image Rotator.

COMMENTS: I initially choose the

Editing Banner/Image Rotator Content

The 'Content Editor' tab is where you can add more images to the rotator, re-arrange them, and edit captions. Use Add New Item, Remove Item, Move Item... buttons under the list of images to add new images to the gallery, to remove them, and to rearrange them. See Figure 3.

Editing Banner/Image Rotator Style

The 'Style Editor' tab is where you can customize the style of your rotator. There are 6 categories available under this tab. I choose the default option for most of the selections for the example banner rotator I created.

General tab choices: Screenshot
- Image Size determines the size with which the images will be displayed. Hint: It is recommended that all the images used in the Image Banner Rotator are of the same size and the Image Size is set in accordance with the actual size of the images.
- Width specifies the width of the images
- Height specifies the height of the images
- Background color specifies the color of the Banner Rotator's background. The background can be seen when the navigation bar position is set to Top or Bottom.
Animation tab choices: Screenshot
- Animation specifies the type of animation. The options are Scroll and Fade. NOTE: I initially chose the scroll option BUT when previewing the finished slide show, I noticed that at the end of the show, the images zoom by very quickly to the beginning. I found that disconcerting so changed to the fade option.
- Direction specifies the direction of animation for the Scroll effect.
- Speed specifies the speed of the animation. You can select between Slow, Normal, and Fast options. The default was normal and I left it like that.
- Delay specifies the time delay before displaying the next image. I left the default selection of 3 seconds.
Caption tab choices: Screenshot
- Caption turns caption on and off.
- Height determines the height of the caption area.
- Background turns on and off the caption's background.
- (Background) Color sets the color of the caption's background.
- Opacity sets the opacity of the caption's background. You will have to play with this option to get the best display for your images. I set it at 100%.
- Face specifies the font face.
- Size defines the font size in pixels.
- Bold, Italic, Underline specifies text weight, style, and decoration.
- (Text) Color sets the text color.
- Left padding specifies left padding before the caption's text.
Navigation bar is a container with navigation buttons. Navigation Bar tab choices: Screenshot
- Navigation Bar ticking or not ticking this box turns navigation bar on and off.
- Position specifies the position of navigation bar. The options are Absolute, Top, and Bottom.
  If set to Absolute the navigation bar will be displayed in front of the image.
  If set to Top or Bottom the navigation bar will be displayed above or below the image correspondingly.
  The total height of the Image Rotator will be increased by the height of the navigation bar.
  X Specifies the horizontal position of the navigation bar.
  Y Specifies the vertical position of the navigation bar.
Navigation Buttons tab choices: Screenshot
- Height specifies the height of the buttons.
- Width specifies the width of the buttons.
- Border allows you to turn the buttons border on and off.
- Background allows you to turn the buttons background on and off.
- Number buttons when ticked, the buttons will display numbers of the images inside them. If not ticked, the buttons will remain blank.
- Face specifies the font face.
- Size defines the font size in pixels.
- Bold, Italic, Underline allows you to specify text weight, style, and decoration.
- (Text) Color sets the text color.
- Normal and Current colors will allow you to define different sets of colors for the normal and for the current states of buttons. Colors of a button will switch to the current values when the mouse is over it or when the image associated with the button is being displayed, and back to normal when another image is displayed.

Summary

I found this add-in very easy to use and would recommend it as an easy way to add the banner rotator feature to a website. For beginners, no JavaScript or CSS knowledge is required. The HTML markup, CSS, and JavaScript are generated automatically. And it worked well with my dynamic web template.

The Banner/Image Rotator works in all currently used browsers (such as IE6, IE7, IE8, Firefox, Opera, Safari, Chrome, etc.), degrades gracefully in very old browsers.

I was disappointed the preview feature did not work for me using Expression Web version 4 or 3. Perhaps the service pack on versions 3 and 4 causes a problem. It did work with both versions 1 and 2.

I found the speeded up rotation at the end of the slide show when the scroll feature was selected to be extremely difficult on my eyes.

I will continue to try out the other themes offered to see how they work. I'll add more to this tutorial as I continue to work with the Banner/Image Rotator Add-in.

IMPORTANT NOTE: Once you have inserted your Banner/Image Rotator into your page, you will need to comment out the code in order to actually work on the rest of the page. Why? Screenshot of Design View with Banner/Image Rotator inserted will show you the images cascade down the page.

Product Website to download trial or purchase.

Buy Now: Banner/Image Rotator Addin for Expression Web

Download Trial: Banner/Image Rotator Addin for Expression Web

Summer Flowers Template

The Banner/Image Rotator can also be used to create a masthead of rotating images for your site. The images again need to be the same size and orientation. If you would like to see an example of how they might be used, check out the Summer Flowers Template.