WeatherSlider Documentation

WeatherSlider 2.0

The jQuery weather widget with breathtaking effects!

Documentation

Overview

This is a beautiful weather slider widget with animated weather effects and 48 weather types.

Thank you

Thank you for purchasing this product. If you have any questions that are beyond the scope of this documentation, please feel free to email us.

Features

  • 48 different weather types with a powerful weather API
  • Showing current weather and 3 day weather forecast (mouse over the weather info box)
  • Beautiful CSS3 animations with jQuery fallback
  • Responsive size from 240×200 to 1300×600 pixels (content, images and font size also auto resizing!)
  • Multiple (unlimited) locations in one slider
  • Multiple (unlimited) sliders on your site with unique settings!
  • Custom Location Search Bar (users can type their custom location)
  • Auto-Slideshow and Auto-Refresh features (optional)
  • Updated, reliable geolocation feature (powered by MaxMind)
  • 12 or 24 hour time format
  • Touch Control for mobile devices (tested under iOS)
  • Keyboard navigation (optional)
  • Language support
  • Supports all major browsers
  • Detailed documentation
  • Layered graphic elements included in .PSD format
  • Free support and free future updates

Changelog

2.0

  • Updated, reliable geolocation feature (powered by MaxMind)
  • Multi-language support
  • Custom Location Search Bar (users can type their custom location)
  • Auto-Slideshow and Auto-Refresh features (optional)
  • Added a lot of customization options (forecast or weather informations can be switched off)
  • Added support for 12 hour time format
  • More intelligent weather information box sizing
  • Fixed 'one location touch' bug
  • Fixed degree symbol

1.2

  • added touch control for mobile devices
  • added geolocation feature
  • daytime bugfix
  • switched-off animation bugfixes

1.0

  • first release

Requirements

jQuery

  • jQuery 1.6+
  • jQuery Easing JS or jQuery UI Effects Core 1.8.9+
  • jQuery background-animation plugin (attached)

Browser Support

  • Mozilla Firefox 3+
  • Google Chrome 10+
  • Safari 3+
  • iOS Safari
  • Opera 10+
  • Internet Explorer 7+

Note: in old browsers some animations (for example fading the transparent PNGs) are missing, but the plugin is fully functional.

World Weather Online API

The script uses a weather API of World Weather Online. You can get a free API key with a simple sign up to the site. We are not removed our own WWO API key from the script, but it is important to change it to your own API key! Every API key has some limitations and if all users will using the same key (ours), it will be disabled soon!

Getting you own API key

You can get your own WWO API key by clicking the following url and after that signing up to the site.

http://www.worldweatheronline.com/register.aspx

If you got your own API key from World Weather Online, put it into your WeatherSlider init code: 

						$(selector).weatherSlider({

							...

							init properties
							
							...

							WWOAPIKey			: '7ab69fab1f233943111500' // this is a not-working sample
						});

Usage

Please note, that the following source codes are in HTML 5 markup.
If you are using xHTML, please be aware of the differences.

Setup

Include the following lines into the head section of your page. Of course the path can be different, depending where is WeatherSlider folder on your server.

Loading the Script

You have to run this plugin like any other jQuery plugin: 

						$(selector).weatherSlider();

For example: if your WeatherSlider container has an id named weatherslider, the correct call method is: 

							$('#weatherslider').weatherSlider();

HTML Markup

A typical HTML markup for the script looks like this: 

						

							Bodo, Norway
							New York, US
							Olenegorsk, Russia
							Sydney, Australia
							Kinshasa, Kongo
							Rome, Italy
							Zurich, Switzerland

You only need to create span tags with class name ws-location in a container element. The number of span tags is not limited, but you have to add at least one. 

						

							New York, US
							Olenegorsk, Russia
							Sydney, Australia
							Kinshasa, Kongo
							Rome, Italy
							Zurich, Switzerland

Note, that Geolocation feature is not working in some cases, it depends on your ISP.

Geolocation (powered by MaxMind)

The script supports Geolocation feature. If you want to display the weather of your current location, simple add the word GEOLOCATION (case-sensitive!) instead of city name by the following way: 

						

							GEOLOCATION
							New York, US
							Olenegorsk, Russia
							Sydney, Australia
							Kinshasa, Kongo
							Rome, Italy
							Zurich, Switzerland

NOTE: geolocation is not available in some cases (depending on your internet or cellphone provider).

Size and Styling

You can add any size to the slider you want between 240x200 and 1300x600 pixels. These two limitations required because of the graphics elements.

So you can set the size and any other settings you want in CSS. For example, if you like rounded corners: 

						.ws-container,
						.ws-fullbg,
						.ws-bottombg,
						.ws-icy {
							border-radius: 6px;
							-moz-border-radius: 6px;
							-webkit-border-radius: 6px;
						}

In weatherslider.css file you'll find all most of the styles of the slider and weather elements.

User Settings (can be applied to the init code)

You can use the following settings or parameters which are applied to the container of the slider. If you run multiple sliders on the same page, you can add different settings to each of them. Note, that these are case sensitive. 

						$(selector).weatherSlider({

							// User settings (can be modified)

							imgPath				: '../weatherslider/img/',

							CSSanimations		: true,
							JSanimations		: true,
							snow				: true,
							rain				: true,
							wind				: true,
							lightnings			: true,

							windyWeather		: 18,
							windDirection		: 'auto',
							icyTemp				: -2,

							measurement			: 'metric',
							daytime				: [7,19],

							infoDuration		: 450,
							infoEasingType		: ['easeOutBack','easeInBack'],

							reduction			: 'auto',
							keybNav				: true,
							touchNav			: true,

							// NEW FEATURES v2.0

							responsive			: true,
							enableSearchField	: true,
							enableWeatherInfo	: true,
							enableForecast		: true,
							slideDelay			: 0,
							refreshInterval		: 0,
							timeFormat			: 12,

							// Show or hide current weather data

							showLoc				: true,
							showTime			: true,
							showCond			: true,
							showTemp			: true,
							showLow				: true,
							showHigh			: true,
							showHum				: true,
							showPrec			: true,
							showWind			: true,
							showPress			: true,
							showVis				: true,

							// Show or hide 3 days forecast weather data

							showFDay			: true,
							showFCond			: true,
							showFLow			: true,
							showFHigh			: true,

							// Important! You must sign up to get your own WorlWeatherOnline API key!
							// Please do NOT use our API key, except for testing only!
							// The registraion for your API key is free:
							// http://www.worldweatheronline.com/register.aspx

							WWOAPIKey			: '7ab69fab1f233943111500'
						});

imgPath : 'path_of_the_weather_images_folder/'
You can change the default path of the images folder. Note, that you must use the slash at the end of the path.

CSSanimations : true or false
Enables or disables CSS3 animations (snow, rain, wind, lightnings).
Note, that CSS3 animations will work only in Google Chrome, Apple Safari and Mozilla Firefox browsers. In other browsers the script will animate weather elements using jQuery.

JSanimations : true or false
If CSSanimations and JSanimations are both disabled, the script won't animate snow, rain, wind and lightnings.

snow : true or false
You can switch off the animation of snow.

rain : true or false
You can switch off the animation of rain.

wind : true or false
You can switch off the animation of wind.

lightnings : true or false
You can switch off the animation of lightnings.

windyWeather : number
You can set the minimum value (in kmph) of the windy weather. If the wind speed of the current weather is higher than the value, the script will animate the background.

windDirection : 'left', 'right' or 'auto'
You can set the direction of the background animation if the weather is windy.

icyTemp : number
You can set the temperature (in °C) of icy weather. If the current temperature is lower than the value, the script will show the icy layer.

measurement : 'metric' or 'imperial'
The type of the measurement.

daytime : [number,number]
The script tries automatically determine whether is day or night. If fails, it will use these settings. With this you can specify the interval when it is daytime.

infoDuration : number
The duration of the animation of infobox.

infoEasingType : ['easingin','easingout']
The easing types of the animation of infobox.

reduction : number or 'auto'
The script automatically scales everything (graphic elements, font sizes, etc) depending on the width and height of the container. You can override it with a number between 0 and 1.

keybNav : true or false
If true, than you can navigate with left and right arrow keys.
Note, that if there are more than one sliders on the same page you should disable this setting.

touchNav : true or false
If true, than you can navigate with swiping your finger over the slider on touch screen mobile devices.

responsive : true or false
Enable this option to turn WeatherSlider into a responsive slider.

enableSearchField : true or false
You can show / hide the search field.

enableWeatherInfo : true or false
You can show / hide the weather infobox.

enableForecast : true or false
You can show / hide the 3 days forecast feature.

slideDelay : number
Auto slideshow. If you enter a value, WeatherSlider will change slides (locations) automatically. The value is in ms so if you need to change slides in 5 secs you should add 5000 to the value (0 means false, auto slideshow off).

refreshInterval : number
Auto refresh. If you enter a value, WeatherSlider will refresh the weather conditions in the current location automatically. The value is in ms so if you need to refresh in 5 secs you should add 5000 to the value (0 means false, auto refresh off).

timeFormat : 12 or 24
You can switch between 12 and 24 hour time formats.

showLoc : true or false
You can show / hide current location.

showTime : true or false
You can show / hide current time.

showCond : true or false
You can show / hide current weather condition information.

showTemp : true or false
You can show / hide current temperature information.

showLow : true or false
You can show / hide low temperature information.

showHigh : true or false
You can show / hide high temperature information.

showHum : true or false
You can show / hide humidity information.

showPrec : true or false
You can show / hide precipitation information.

showWind : true or false
You can show / hide wind information.

showPress : true or false
You can show / hide pressure information.

showVis : true or false
You can show / hide visibility information.

showFDay : true or false
You can show / hide the name of the day in the forecast.

showFCond : true or false
You can show / hide weather conditions in the forecast.

showFLow : true or false
You can show / hide low temperature information in the forecast.

showFHigh : true or false
You can show / hide high temperature information in the forecast.

WWOAPIKey : 'yourownwwoapikey'
See it above.

Language Support

You can change the language both of the weather types and the UI.

You can find all the editable texts in the uncompressed weatherslider.kreaturamedia.jquery.js (which also included in the package) in the array named $.weatherSlider.language. You can edit the UI texts and all the weather condition names too.

Examples

Click here for some examples.

Credits

  • For the most accurate Geolocation results, we are using MaxMind's world leading GeoIP service.

Contact