Difference between revisions of "Wallpapers"
(→Defining image sets) |
m |
||
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
The ''wallpapers'' component provide nice, changing wallpapers for your interface. It comes as two components: | 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. | * Core - The component itself, includes the JavaScripts of the functionality, but not wallpaper images at all. | ||
− | * CCIL - Includes 4 sets of background images | + | * CCIL - Includes 4 sets of background images. |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
=== Defining collections === | === Defining collections === | ||
Line 67: | Line 63: | ||
<!-- JavaScript --> | <!-- JavaScript --> | ||
<script type='text/javascript' src='ccil/js/ccil.js'></script> | <script type='text/javascript' src='ccil/js/ccil.js'></script> | ||
− | <script type='text/javascript' src='ccil/js/ccil- | + | <script type='text/javascript' src='ccil/js/ccil-ui.js'></script> |
+ | <script type='text/javascript' src='ccil/js/ccil-wallpaper.js'></script> | ||
</pre> | </pre> | ||
Line 77: | Line 74: | ||
==== path ==== | ==== path ==== | ||
− | Specifies the path to look for ''collections.json'' file. | + | Specifies the path to look for ''collections.json'' file. The default is the ''wallpapers'' folder in the root of the site. |
<pre> | <pre> | ||
− | CCIL.ui.wallpaper.path = ' | + | CCIL.ui.wallpaper.path = 'wallpapers/'; |
</pre> | </pre> | ||
The default value is 'ccil/wallpapers/', if you include the ''ccil-ui-wallpapers-core'' component, you will have the following pre-defined set: | The default value is 'ccil/wallpapers/', if you include the ''ccil-ui-wallpapers-core'' component, you will have the following pre-defined set: |
Latest revision as of 17:14, 26 February 2022
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.
Contents
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();