Create a New Banner or Edit an Existing One

1. Click on the Banner Main button.
   
   
2. Click on Add New Banner (or open any existing Banner in order to Edit)
   
   
   
   
3. The only mandatory field is the Banner ID and this can be a descriptive word like "SalesBanner" (no embedded spaces).
   
   
4. Accept the default height and width or change to your desired settings. Refer to the Examples for ideas on how to tailor your banner.
   
   
5. Leave all other fields blank until you have the basic banner working.
   
   
6. Save the Banner.

Adding Slides

1. Once you save the Banner (or have opened an existing on for Editing) you can add slides.
   
   
2. Click Add New Slide (or open an existing one to Edit)
   
   
3. The only mandatory field is the Image Filename.
   
   
1. If the referenced banner image is local, use syntax such as: banner/images/image1.jpg
   
   
2. If the reference image is not in your document root, use syntax such as: http://alphatogo.com/images/header.jpg
   
   
4. Leave all other settings alone until the basic banner is working.
   
   
5. Save each slide and close the Detail if finished.

Testing the Banner

Once the Banner and Slide(s) are saved, click Test in the Banner record. The screen should go to the Home tab and display your banner as designed.

Viewing Banner Code

Once the banner looks good and ready to deploy, click View Code. The code will download in your browser (methods vary by browser) for viewing. Open this file and copy-paste the code to the desired location for your banner.

There is a HEAD area code, and there is BODY area code (different colors below).

At this point, ensure the assets (image, js files, etc.) have been published to the target location.

Here is an example of code:

<!-- HEAD AREA -->

<style>

       .TB_Wrapper {

               max-width: 100%;

               height: 350px;  

       }

</style>

<link rel="stylesheet" href="banner/style.css" />

<script src="banner/jquery-1.7.1.min.js"></script>

<script src="banner/jquery.easing.1.3.min.js"></script>

<script src="banner/trans-banner.min.js"></script>

<script>

jQuery(function($){

       $('.TB_Wrapper').TransBanner({

       });

});

</script>

<!-- BODY AREA -->

<div class="TB_Wrapper"><!--Start of Slides -->

       <div class="Slides">

               <div class="Slide"  >

                       <a target="" href=""><img src="http://alphatogo.com/images/header.jpg" alt="img1" /></a>

                       <div>

                       this is tsome test

                       </div>

               </div>

               <div class="Slide"  >

                       <a target="_blank" href="https://google.com"><img src="banner/images/image2.jpg" alt="img1" /></a>

                       <div>

                       more text

                       </div>

               </div>

       </div>

</div>