| Number.transUnit | @ | base.php:21 | |
| e | @ | jquery-2.1.4.min.js:4 | |
| Ab | @ | jquery-2.1.4.min.js:4 | |
| n.param | @ | jquery-2.1.4.min.js:4 | |
| ajax | @ | jquery-2.1.4.min.js:4 | |
| put | @ | io_openhab2.js:173 | |
| write | @ | io_openhab2.js:46 | |
| _write | @ | base.js:1717 | |
| (anonymous) | @ | jquery.mobile-1.4.5.min.js:3 | |
| click | @ | basic.js:718 | |
| h | @ | jquery.mobile-1.4.5.min.js:3 | |
| dispatch | @ | jquery-2.1.4.min.js:3 | |
| r.handle | @ | jquery-2.1.4.min.js:3 |
/**
* A widget to display a slideshow, controlled by items/items
*
* @param {id=} unique id for this widget (optional)
* @param {text} a directory where the pictures are located
* @param {value=2} delay between the slides in sec (optional, default: 2 sec)
* @param {item=} item to switch to the next slide (optional)
* @param {item=} item to switch to the previous slide (optional)
(if this is same as item_next: 0 triggers previous, any value greater than 0 triggers next, negative values are ignored)
* @param {item=} item to stop the animation (optional)
* @param {item=} item to start the animation (optional)
(if this is same as item_stop: 0 stops, any value greater than 0 starts, negative values are ignored)
* @param {value=0} item to show the pictures in reverse order (optional, default '0')
*
* @author Alex ???, Stefan Widmer
*
* [USER="25162"]info[/USER] based on cycle2 jquery-plugin: (c) 2012 M. Alsup; Dual licensed: MIT/GPL
* [USER="27066"]Link[/USER] http://jquery.malsup.com/cycle2
*/
{% macro slideshow(id, dir, delay, item_next, item_prev, item_stop, item_start, reverse) %}
{% set uid = uid(page, id) %}
<div{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %} class="slideshow cycle-slideshow" data-widget="multimedia.slideshow"
data-cycle-log="false"
data-cycle-timeout="{{ delay|default(2) * 1000 }}"
data-cycle-reverse="{{reverse|default(0)}}"
data-item="{{ item_prev }}, {{ item_next }}, {{ item_stop }}, {{ item_start }}">
{% for file in dir(dir, '(.+?).(jpg|png|svg)') %}
<img src="{{ file.path }}" style="display: block;" title="{{ file.label }}" alt="{{ file.label }}" />
{% endfor %}
</div>
{% endmacro %}
* @param {value=0} item to show the pictures in reverse order (optional, default '0')
{{ multimedia.slideshow('', 'pics/klingel/Dg', '5', '', '' ,'' ,'', '1') }}
<div class="center">
<a data-cycle-cmd="prev" href=# id="prev">Prev</a>
<a data-cycle-cmd="pause" href=# id="pause">Pause</a>
<a data-cycle-cmd="resume" href=# id="resume">Start</a>
<a data-cycle-cmd="next" href=# id="next">Next</a>
</div>
<style>
#wrapper { width: 512px; height: 384px; padding: 0; overflow: hidden; }
#scaled-frame { width: 640px; height: 480px; border: 0px; }
#scaled-frame {
zoom: 0.8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
-o-transform: scale(0.8);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.8);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame { zoom: 1; }
}
</style>
<div id="wrapper"><iframe id="scaled-frame" src="http://192.168.0.78/goform/stream?cmd=get&channel=4"></iframe></div> <br>
{{ basic.symbol('', [Licht1.schalten', 'Licht2.schalten'], ['aus', 'an'], '', [0,1], 'or') }}
{{ basic.stateswitch('Roll1Stop', 'EG.Raum1.Rolladen1.stop', 'mini', '0', 'control_cancel.svg', '', '', 'icon1') }}
The maximal duration can be set in configuration, default is 3 seconds.
Kommentar