Using the AnythingWeather Looper Widget

Setting up the Widget

Import jQuery 1.7
Import jQuery 1.7 into the page in which the widget will appear. If jQuery 1.7 is already imported into the page, skip this step.

In the <head> section of the page, add the line:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Import the AnythingWeather Looper Widget
Import the AnythingWeather Looper Widget into the page by adding the following line to the <head> section of the page. This must appear after the line that imports jQuery 1.7.

<script type="text/javascript" src="https://weather-widgets.com/aw-widgets/widgets/aw-looper-widget.js"></script>
Enable the AnythingWeather Looper Widget
Enable the AnythingWeather Looper Widget into the page by adding the following lines to the <head> section of the page. This must appear after the lines that import jQuery 1.7 and the widget.
```
<script type="text/javascript">
  $(function(){
    $('#awLooperPane').awLooper({});
  });
</script>
```
Place the AnythingWeather Looper Widget
Place the AnythingWeather Looper Widget onto the page by adding the following line to the <body> section of the page where the widget is to appear.

<div id="awLooperPane"></div>

Widget settings

This widget supports a number of settings. The settings are specified by placing them between the curly braces ({}) in the code of step 3. See the example below.

The available settings are described in the following table:

Option	Description	Default
paneWidth	Specifies the width of the widget in pixels. The images will be resized by the browser to fit this width.	540
sourcePath	Specifies the base URL to the folder that contains the frame images. Your AnythingWeather contact will provide you this value for your account. It should be used exactly as supplied.	N/A
location	Specifies the name that identifies which location for which to show frame images. Your AnythingWeather contact will provide you this value for your account. It should be used exactly as supplied.	N/A
autoPlay	One of `true` or `false`. Specifies if the frames should start playing automatically once the widget is loaded.	true
speed	One of the values 1 through 5, specifying the initial speed setting of the widget.	3
rock	One of `true` or `false`. Specifies if the widget should initally be in "rock" mode (as opposed to loop mode).	false
intervals	A set of values that sets the actual intervals between animations for speed values 1 though 5. Each value is the interval delay in milliseconds.	[200,400,600,800,1000]
pauseInterval	Specifies the duration of the pause interval in milliseconds when the animation reaches the last image of the animation.	1000

Example

<script type="text/javascript">
  $(function(){
    $('#awLooperPane').awLooper({
      autoPlay: false,
      pauseInterval: 2000,
      speed: 5
    });
  });
</script>

Visit an example page that uses this widget. To see the source code for the page, use your browser to view the source once the page is loaded.