Wallpapers

From CCIL
Jump to: navigation, search

The wallpapers component provide nice, changing wallpapers for your interface. It comes as two components:

  • Core - The component itself, includes the JavaScripts of the functionality, but not wallpaper images at all.
  • CCIL - Includes 4 sets of background images.

Defining collections

Upon load, the setRandom or load methods look at CCIL.ui.wallpaper.path for a file, named collections.json. Its purpose is to define the sets of images to use as a background:

{"version":"1.0",
 "date": "26-04-26",
 "images":
[
 {"name":"nature"},
 {"name":"yana"},
 {"name":"cars"},
 {"name":"aircraft"}
]
}

Defining image sets

Image sets are described collections of image files, and a JSON descriptor which is parsed in order to generate the background statement. They resided in a file named images.json. One can be found in each collection directory.

{"version":"1.0",
 "date": "16-04-25",
 "images":
[
 {"name":"100_HD_Nature_Wallpapers_HQPixsBlog-97.jpg_HQ_Pixs_Blog_42.jpg"},
 {"name":"1080p-snow-wallpaper.jpg"},
 {"name":"183796-best-nature-wallpapers-hd.jpg"}
]
}

Include

Maven

Core only:

<dependency>
	<groupId>net.ccil</groupId>
	<version>${ccil.version}</version>
	<artifactId>ccil-ui-wallpapers-core</artifactId>
	<scope>runtime</scope>
	<type>war</type>
</dependency>

With 4 sets included:

<dependency>
	<groupId>net.ccil</groupId>
	<version>${ccil.version}</version>
	<artifactId>ccil-ui-wallpapers-ccil</artifactId>
	<scope>runtime</scope>
	<type>war</type>
</dependency>

HTML

<!-- JavaScript -->
<script type='text/javascript' src='ccil/js/ccil.js'></script>
<script type='text/javascript' src='ccil/js/ccil-ui.js'></script>
<script type='text/javascript' src='ccil/js/ccil-wallpaper.js'></script>

Requires

API

path

Specifies the path to look for collections.json file. The default is the wallpapers folder in the root of the site.

CCIL.ui.wallpaper.path = 'wallpapers/';

The default value is 'ccil/wallpapers/', if you include the ccil-ui-wallpapers-core component, you will have the following pre-defined set:

  • Nature
  • Aircraft
  • Cars
  • Yana

setRandom

Sets a random wallpaper as a background of the page.

CCIL.ui.wallpaper.setRandom();