Author: andre
Date: 2010-03-18 23:26:02 +0100 (Thu, 18 Mar 2010)
New Revision: 41526
Added:
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-blackbg.png
Modified:
openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css
openimages/trunk/src/main/webapp/oiplayer/index.html
openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
Log:
black background for controls, white background is made with .white
Added: openimages/trunk/src/main/webapp/oiplayer/css/images/controls-blackbg.png
===================================================================
(Binary files differ)
Property changes on:
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-blackbg.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-03-18
18:04:13 UTC (rev 41525)
+++ openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-03-18
22:26:02 UTC (rev 41526)
@@ -14,7 +14,7 @@
div.oiplayer
{
- width: 320px;
+ /*width: 320px;*/
position: relative;
}
@@ -49,12 +49,14 @@
{
position: absolute;
bottom: 0;
- z-index: 99;
- background-image: url(images/controls-whitie.png);
+ z-index: 19;
+ background-image: url(images/controls-blackbg.png);
background-repeat: repeat;
- height: 24px;
- padding: 3px 4px;
+ height: 27px;
+ padding: 0;
+ margin: 0;
}
+div.oiplayer > div.controls.top.white { background-image:
url(images/controls-whitie.png); }
div.oiplayer > .preview { cursor: pointer; }
div.oiplayer > img.preview { display: block; }
@@ -113,7 +115,9 @@
height /**/: 25px; /* for IE5/Win */
}
-div.oiplayer ul.controls a:hover { background-position: 0 -25px; }
+div.oiplayer div.controls ul.controls a:hover,
+div.oiplayer div.controls.top.white ul.controls a:hover { background-position:
0 -25px; }
+div.oiplayer div.controls.top ul.controls a:hover { background-position: 0
-49px; }
div.oiplayer ul.controls li.play a
{
@@ -127,12 +131,16 @@
{
background-image: url(images/controls-pause.png);
width: 21px;
- margin-left: -3px;
+ margin-left: -3px; /* aligns to border */
float: left;
}
+
div.oiplayer.fullscreen ul.controls li.play a,
-div.oiplayer.fullscreen ul.controls li.pause a { margin-left: 1px; }
+div.oiplayer.fullscreen ul.controls li.pause a { margin-left: 0; }
+div.oiplayer > div.controls.top ul.controls li.play a,
+div.oiplayer > div.controls.top ul.controls li.pause a { margin-left: 5px; }
+
div.oiplayer div.oiplayerinfo
{
font-size: xx-small;
@@ -161,6 +169,9 @@
div.oiplayer.fullscreen ul.controls li.sound a,
div.oiplayer.fullscreen ul.controls li.sound.muted a { margin-right: 3px; }
+div.oiplayer div.top ul.controls li.sound a,
+div.oiplayer div.top ul.controls li.sound.muted a { margin-right: 8px; }
+
div.oiplayer ul.controls li.screen a
{
float: right;
@@ -173,23 +184,31 @@
div.oiplayer ul.controls li.position
{
font-family: Monaco, Courier, monospaced;
+ font-size: 12px;
+ line-height: 26px;
color: #555;
- line-height: 2em;
- margin-left: 7px;
- width: 53px;
+ margin-left: 7px;
float: left;
+ width: 63px;
+ text-align: center;
}
+div.oiplayer div.top ul.controls li.position { color: #efefef; }
+div.oiplayer div.top.white ul.controls li.position { color: #555; }
+
/* ### jquery-ui and slider ### */
div.oiplayer ul.controls li.slider
{
float: left;
- width: 153px;
margin-left: 7px;
background: url(images/slider11-left.png) left -25px no-repeat;
padding-left: 10px;
}
div.oiplayer ul.controls li.slider.changed { background:
url(images/slider11-left.png) left -50px no-repeat; }
+div.oiplayer div.top.white ul.controls li.slider.changed { background:
url(images/slider11-left.png) left -50px no-repeat; }
+div.oiplayer div.top ul.controls li.slider { background:
url(images/slider11-left.png) left top no-repeat; }
+div.oiplayer div.top.white ul.controls li.slider { background:
url(images/slider11-left.png) left -50px no-repeat; }
+div.oiplayer div.top.white ul.controls li.slider { background:
url(images/slider11-left.png) left -25px no-repeat; }
div.oiplayer ul.controls li.slider div.slider div.ui-slider
{
@@ -217,6 +236,14 @@
height: 25px;
background: url(images/slider11-long.png) right -50px no-repeat;
}
+div.oiplayer div.top li.slider div.ui-slider-range
+{
+ background: url(images/slider11-long.png) right top no-repeat;
+}
+div.oiplayer div.top.white li.slider div.ui-slider-range
+{
+ background: url(images/slider11-long.png) right -50px no-repeat;
+}
div.oiplayer .ui-state-default, div.oiplayer .ui-widget-content
.ui-state-default
{
border: 0;
@@ -224,11 +251,11 @@
background: url(images/slider11-pos.png) left -75px no-repeat;
margin-left: -10px;
}
-div.oiplayer ul.controls a.ui-slider-handle:hover { background-position: 0
-100px; }
+div.oiplayer div.controls ul.controls a.ui-slider-handle:hover {
background-position: 0 -100px; }
+div.oiplayer div.controls.top ul.controls a.ui-slider-handle:hover {
background-position: 0 -100px; }
.ui-state-default:focus, .ui-widget-content .ui-state-default:focus { outline:
none; }
-
/* fullscreen */
div.oiplayer.fullscreen
{
Modified: openimages/trunk/src/main/webapp/oiplayer/index.html
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/index.html 2010-03-18
18:04:13 UTC (rev 41525)
+++ openimages/trunk/src/main/webapp/oiplayer/index.html 2010-03-18
22:26:02 UTC (rev 41526)
@@ -143,5 +143,13 @@
<address>Have fun! <a href="http://www.toly.nl";>André van Toly</a></address>
</div>
+<script src="http://www.google-analytics.com/ga.js"; type="text/javascript">
</script>
+<script type="text/javascript">
+try {
+ var pageTracker = _gat._getTracker("UA-5799921-11");
+ pageTracker._trackPageview();
+} catch(err) {}
+</script>
+
</body>
</html>
Modified: openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
2010-03-18 18:04:13 UTC (rev 41525)
+++ openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
2010-03-18 22:26:02 UTC (rev 41526)
@@ -53,7 +53,7 @@
$(mt).wrap('<div class="oiplayer"><div
class="player"></div></div>');
var div = $(mt).closest('div.oiplayer');
var player = createPlayer(mt, sources, config);
- $(div).addClass(player.type);
+
$(div).width(player.width).height(player.height).addClass(player.type);
if (player.myname.indexOf('cortado') > -1) {
$(div).find('div.player').empty();
$(div).find('div.player').append(player.player);
@@ -69,13 +69,17 @@
if (config.controls) {
$(div).append(createControls());
- if (config.controls != true) {
- $(div).find('div.controls').addClass(config.controls);
- if (config.controls.indexOf('top') > -1) {
- $(div).find('div.controls').addClass('top');
- $(div).find('div.controls').hide();
- }
- }
+ if (config.controls != true) {
+
$(div).find('div.controls').width(player.width).addClass(config.controls);
+ $(div).find('li.slider').width(player.width -
182).addClass(config.controls);
+ if (config.controls.indexOf('top') > -1) {
+ $(div).find('div.controls').addClass('top');
+ $(div).find('div.controls').hide();
+ $(div).height(player.height);
+ } else {
+ //$(div).height(player.height + 25);
+ }
+ }
}
//$.oiplayer.msg(player, player.info);
players.push(player);
@@ -204,20 +208,33 @@
player.width = player.owidth;
player.height = player.oheight;
} else if (multi_h < multi_w) {
+ $(div).width('100%').height('100%');
player.width = Math.round(player.owidth * multi_h);
player.height = window_h;
- half = Math.floor((window_w - player.width) / 2);
+ half = Math.round((window_w - player.width) / 2);
} else {
+ $(div).width('100%').height('100%');
player.width = window_w;
player.height = Math.round(player.oheight * multi_w);
}
- $(div).toggleClass('fullscreen');
- $(div).find('div.player').width(player.width).height(player.height);
- $(div).find('div.controls').width(player.width).css('margin-left',
half);
- $(div).find('div.controls li.slider').width(player.width - 170);
-
$(div).find('.preview').width(player.width).height(player.height).css('margin-left',
half);
+ $(div).toggleClass('fullscreen').width('100%').height('100%');
$(player.player).width(player.width).height(player.height);
+
+ if ($(div).is('.fullscreen')) {
+
$(div).find('div.player').width(player.width).height(player.height).css('margin-left',
half);
+
$(div).find('.preview').width(player.width).height(player.height).css('margin-left',
half);
+
+ $(div).find('div.controls').width(player.width).css('margin-left',
half);
+ $(div).find('div.controls li.slider').width(player.width - 182);
+ } else {
+
$(div).find('div.player').width(player.width).height(player.height).css('margin-left',
'0');
+
$(div).find('.preview').width(player.width).height(player.height).css('margin-left',
'0');
+
+ $(div).find('div.controls').width(player.width).css('margin-left',
'0');
+ $(div).find('div.controls li.slider').width(player.width - 182);
+ }
+
var pos;
if (player.myname == 'flowplayer') {
pos = parseInt(player.position());
_______________________________________________
Cvs mailing list
[email protected]
http://lists.mmbase.org/mailman/listinfo/cvs
