Glow is an opensource (free) Javascript library that was developed by the BBC to help facilitate the building of their new website in 2008. In some respects it is similar to JQuery or MooTools, but is developed specifically for large media websites which receive high volumes of traffic from a wide variety of web browsers. Although it has a slightly larger file size than jQuery, it is supported by a greater number of web browsers as far back as Internet Explorer 5.5. The BBC have released Glow as an opensource Javascript library in the hope that it will become widely adopted and individual designers or developers can write their own plugins for it which in turn can be shared.

The Glow API is built into the News Media theme so it is ready to be used. Glow can be used to generate interactive items on websites like drag-able widgets, modal windows, slideshows, tabbed boxes and a range of other elements which can be frequently found in online media websites.

By default, the Glow API is not loaded automatically. It must be called manually which conserves bandwidth and reduces HTTP requests for those not wishing to use Glow in their sites. To load Glow, add the following tag in the Custom Header box in the page inspector:

<script type="text/javascript" src="%pathto(js/glow/1.5.0/core/core.js)%"></script>

Perform this step whenever you want to add a Glow function to an individual page. This tag tells a web browser to load the Glow API which is already stored in the theme contents and will be published automatically to your web server.

Using Glow
Setting up Glow functions in your website is not too difficult, much of the code used can simply be copied and pasted from this document. Customising Glow functions requires a good knowledge of HTML. It is important to understand that like other Javascript libraries, Glow is designed to be customised yourself if the basic functions provided don’t meet your expectations.


Testing
It is useful at this stage to quickly check that your version of Glow is set-up and is being loaded correctly in the theme before attempting to try any advanced functions. A quick test is to copy and paste this code into your Custom Javascript box in the page inspector:

glow.ready(function() {
    var p = glow.dom.get("#greeting");
    p.html("Congratulations - glow is working!");
});

Then copy and paste the following HTML into any RapidWeaver page:

<p id="greeting"></p>

If Glow is working, you will see a message displayed in your page that reads “ Congratulations - glow is working!”


Create a scrolling carousel

Add the following HTML code to any styled text or code area in RapidWeaver:

<ol id="carousel">
<li><img src="%pathto(images/editable_images/example.gif)%" alt="1" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="2" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="3" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="4" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="5" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="6" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="7" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="8" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="9" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="10" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="12" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="13" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="14" /></li>
<li><img src="%pathto(images/editable_images/example.gif)%" alt="15" /></li>
</ol>

The above code is a standard HTML ordered list. Change the image source attribute (src) to reflect the location of your stored images. Give each image an alternative text (alt) attribute to aid accessibility. Images can also have links applied. If pasting into a styled text page, set all of this code to Ignore Formatting from the format menu in RapidWeaver. Add or remove list item elements to increase or decrease the number of items in your carousel.

Copy and paste these HTTP requests into the custom Header box in the RapidWeaver page inspector:

<script type="text/javascript" src="%pathto(js/glow/1.5.0/core/core.js)%"></script>
<script type="text/javascript" src="%pathto(js/glow/1.5.0/widgets/widgets.js)%"></script>
<link href="%pathto(js/glow/1.5.0/widgets/widgets.css)%" type="text/css" rel="stylesheet" />

These HTTP requests above will call the Glow library, the widgets and CSS. Next, paste the following code into the Custom Javascript box in your Page Inspector:

glow.ready(function() {
var carousel = new glow.widgets.Carousel("#carousel");
});

This code will call the Glow library and load the carousel effect. Finally, add the following CSS to the Custom CSS box in your Page Inspector:

ol#carousel li {
margin:4px;
height: 75px;
}

In the above code, you can set the height to whatever you want. Alternatively removing the height attribute will make the carousel assume that all images have the same dimensions, based on the width and height of the first item.

Images (buttons) used in the carousel are stored in the theme contents in js/glow/1.5.0/widgets/images/carousel.

When previewed in RapidWeaver, the carousel may not display correctly. But once you have previewed it in a regular web browser or exported / published your site, the carousel should be working correctly.

Much more information on setting up the carousel can be found here including customisable options, configurations and themes: http://www.bbc.co.uk/glow/docs/1.5/furtherinfo/widgets/carousel/


Information windows and popup windows

Start by adding the following HTML code to your page content or sidebar:

<p>
<a href="http://www.google.com" id="aBasicLink">Visit Google</a>
</p>
<div id="simpleInfoPanel">
<h2 class="hd">Visit Google</h2>
<p>Google is a global search engine which makes it easier to find the information you are looking for. Popular search alternatives include <a href="www.msn.com">MSN</a> and <a href="www.yahoo.com">Yahoo!</a>
</p>
</div>

If pasting this code into a styled text page, set the formatting to ‘Ignore’ from the formatting menu in RapidWeaver. Then paste the following Javascript code in the custom Javascript box in your Page Inspector:

glow.ready(function() {
//create InfoPanel instance
var myInfoPanel = new glow.widgets.InfoPanel("#simpleInfoPanel", {
  context: "#searchBox"
});
//display panel
myInfoPanel.show();
});

Then call the scripts in the Custom Header box in your page inspector:

<script type="text/javascript" src="%pathto(js/glow/1.5.0/core/core.js)%"></script>
<script type="text/javascript" src="%pathto(js/glow/1.5.0/widgets/widgets.js)%"></script>
<link href="%pathto(js/glow/1.5.0/widgets/widgets.css)%" type="text/css" rel="stylesheet" />

More information on setting up and customising information windows is available on this page: http://www.bbc.co.uk/glow/docs/1.5/furtherinfo/widgets/infopanel/

Modal Window

These types of effects go by various names and descriptions such as lightbox, shadowbox, mediabox, slimbox etc. When this effect is run, the page background of a webpage is faded to a lighter or darker colour and a window is floated in the centre.

Start by calling your scripts in the Custom Header box in your page inspector:

<script type="text/javascript" src="%pathto(js/glow/1.5.0/core/core.js)%"></script>
<script type="text/javascript" src="%pathto(js/glow/1.5.0/widgets/widgets.js)%"></script>
<link href="%pathto(js/glow/1.5.0/widgets/widgets.css)%" type="text/css" rel="stylesheet" />

Copy and paste this code into your Custom Javascript box in the Page Inspector:

glow.ready(function() {
//create Panel instance
var myLightbox = new glow.widgets.Panel("#myLightbox", {
width: 540,
theme: "light",
modal: false,
anim: "fade"
});
//add custom class name
myLightbox.container.addClass("husky-panel");
//display panel
myLightbox.show();
});


Troubleshooting:
Refresh your web browser or preview window to load new scripts
Check the Glow API is being called from the page header (use Activity Viewer)
Ensure HTML code is correct with open and close tags specified
Avoid changing selector names unless you’ve customised the API and CSS
Check your Javascript for mistakes or simple typos
The activity window in Safari will inform you of any files which are missing or can’t be accessed. Both the developer menu in Safari and the Firebug plugin for Firefox will inform you of Javascript errors or files not found.

Important notes:
Some third-party plugins have their own Javascript code for special effects. This can be quite destructive and will sometimes conflict with other code like Glow running in the same page. Please bare in mind that the Glow functions used in this theme cannot be easily switched to another theme. Code that you enter will only function in the News Media theme.

Taking this further:
The Glow API is a very advanced new Javascript framework. It would be possible to write an entire book on the subject! This guide just introduces a couple of basics and demonstrates the sort of things Glow is capable of achieving. It is definitely worth referring to the BBC Glow API website for more detailed information and working examples. Because this is a very new Javascript library, the availability of third-party resources is lacking at this present time. It would be worth periodically searching the internet and keeping a close eye out for new tutorials and user guides. If you would rather stick with using a mainstream Javascript API, jQuery is the best option and is supported by this theme.