SKIP navigation
Buildit Template Widgets
BuilditInformation Services
looks like this:

Promo

No 1 No 2 No 3
3 Days of Service
Vienna Boys Choir
Omaha

This page's main content:

buildit documentation

widget: 'Promo'

Why use it?

Want some visual action and flair? Want to grab attention? Try the 'Promo' widget. Each image can be linked to appropriate content.

How to use it

This widget uses the jQuery javascript library. That library is loaded into your page automatically. Follow these steps:

  1. call the jflow javascript in your page <head>
  2. paste the code in your page <body> - or save it as an include. All of your images must be exactly 275px wide by 183px tall. There must be a '<span class="jFlowControl">No 1</span>' for each image. Subsequent spans will use 'No 2', 'No 3', 'No 4' etc. and so on. Use as many as you like (but keep it reasonable). So for example – using four images you'd have four spans with the 'jFlowControl' class. Now just edit your images and their links and you'll have it.
1. call the jflow javascript in your page <head>:

Copy ONLY what's BETWEEN the comment tags (in red) below.

<!--
<script type="text/javascript" src="http://www.unomaha.edu/js/08/jquery-jflow.js"></script>
-->
2. paste this code in your page <body> - or save it as an include:

<script type="text/javascript">
/* <![CDATA[ */
  $(function() {
     $("#controller").jFlow({
       slides: "#slides",
       width: "275px",
       height: "183px"
     });
   });
/* ]]> */
</script>
<div class="prom-275">
   <h3>Promo</h3>
   <div id="prevNext">
     <span class="jFlowPrev btn-arrow-l"></span>
     <span class="jFlowNext btn-arrow-r"></span>
   </div>
   <div class="jflow-wrap-275">
     <div id="wrap">
       <div id="controller" class="hide">
       <span class="jFlowControl">No 1</span>
       <span class="jFlowControl">No 2</span>
       <span class="jFlowControl">No 3</span>
     </div>
     <div id="slides">
       <div><a href="path2yourlink.php"><img src="path2yerimg.jpg" alt="describeyourimage" /></a></div>
       <div><a href="path2yourlink.php"><img src="path2yerimg.jpg" alt="describeyourimage" /></a></div>
       <div><a href="path2yourlink.php"><img src="path2yerimg.jpg" alt="describeyourimage" /></a></div>
     </div>
   </div>
</div>
</div>
use this code to call as an include:

<?php include('/web/yoursite/inc/prom-275.htm'); ?>

note:

Don't make changes that compromise the designed function or appearance of the widgets. They should look, and behave, the same way no matter where they appear. Changes to font sizes, link colors, and/or other elements cause uncertainty for users, and compromise the visual and functional design that is part of the UNO brand. So please, use the widgets only as they are designed, and only for their intended uses. These widgets are only for use in the right-hand column (04 Main Content Right Column) of the WTA_01 template.

Content last modified: June 14, 2011, 2:38pm