| Autor |
Nachricht |
kramsen
Threadersteller
Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht: 
|
Verfasst Sa 17.09.2011 20:49
Titel Kinomodus realisieren |
  |
|
Abend,
Unzwar möchte ich einen Kinomodus auf meiner Seite realisieren. D.h. ich habe in meinem php-Dokument einen SWF-Player zu sitzen und möchte den restlichen Content, am besten durch nen Klick auf einen Button, abdunkeln bzw. dimmen.
Es gibt ja diverse Lightboxes, die im Prinzip meinen Zweck erfüllen, jedoch immer neuen Content in Form von Pop-Ups etc. öffnen.
Ich denke das dürfte doch mit Javascript und CSS möglich sein, oder irre ich mich damit? Eventuell mit halbtransparenten PNGs?
Meine Frage: Hat sich jemand damit schon näher befasst, gibt es derartige Tools oder sonstige Hilfestellungen?
Ich danke im Voraus!
Zuletzt bearbeitet von kramsen am Sa 17.09.2011 21:02, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
|
| |
 |
|
|
Anzeige
|
|
|
kramsen
Threadersteller
Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht:
|
Verfasst So 18.09.2011 05:49
Titel
|
|
|
| choise hat geschrieben: | | http://flowplayer.org/tools/demos/toolbox/expose/index.html |
Danke,
ist doch aber auf den Flowplayer beschränkt, oder?
|
|
| |
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst So 18.09.2011 11:15
Titel
|
|
|
|
nein, das hat nichts mit dem flowplayer zu tun. ist eben von den gleichen leuten. jquery-tools ist eine art library für jquery mit verschiedenen plugins. eben auch diesem expose teil, das kannst du natürlich anwenden, auf was du willst.
|
|
| |
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Di 20.09.2011 15:35
Titel
|
|
|
Im Grunde brauchst du kein Plugin dafür.
Dein Container mit dem Video gibst du
| Code: |
position:relative;
z-index:999;
|
Dazu brauchst du noch einen Container, der den schwarzen "Schleier" darstellt:
| Code: |
<span id="kinomodus">Kinomodus</span>
<div id="schleier"></div>
#kinomodus{
position:relative;
z-index:999;
}
#schleier{
position:absolute;
top:0;
left:0;
background: #000;
opacity:0.5;
z-index:997;
display:none;
}
|
Diesen Schleier lässt du nun per klick auf einen Link mit z.b. jQuery ein/ausblenden:
| Code: |
var kinomodus = false;
$('#kinomodus').click(function(){
if(!kinomodus){
$('#schleier').fadeIn();
kinomodus=true;
} else {
$('#schleier').fadeOut();
kinomodus=false;
}
});
|
Zuletzt bearbeitet von immerIch am Di 20.09.2011 15:40, insgesamt 2-mal bearbeitet
|
|
| |
|
|
kramsen
Threadersteller
Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht:
|
Verfasst Do 22.09.2011 17:00
Titel
|
|
|
Danke für deine Antwort @immerIch, sehr hilfreich!
Ich habe derzeit auch schon eine Lösung mithilfe von javascript gefunden, die auch wunderbar funktioniert.
dim.js
| Code: |
var pageLayer = {
layerElement : null,
maxLayerOpacity : 0.7,
addRemoveLayer : function() {
if (this.layerElement == null) {
// create layer element
this.layerElement = document.createElement('div');
// attach event
this.layerElement.onmousedown = function() {
pageLayer.fadeLayer(-0.1, pageLayer.maxLayerOpacity);
}
// set styles of layer element
this.layerElement.style.position = 'absolute';
this.layerElement.style.top = '0px';
this.layerElement.style.left = '0px';
this.layerElement.style.width = '100%';
this.layerElement.style.height = document.documentElement.scrollHeight + 'px';
this.layerElement.style.minHeight = '100%'; // for IE
this.layerElement.style.backgroundColor = '#000';
document.documentElement.style.overflow = 'hidden';
// add layer to body
document.getElementsByTagName('body')[0].appendChild(this.layerElement);
} else {
// remove layer and make document scrollable
document.getElementsByTagName('body')[0].removeChild(this.layerElement);
document.documentElement.style.overflow = 'visible';
this.layerElement = null;
}
},
fadeLayer : function(addend) {
var opacity;
// if not called by timeout
if (arguments[1] == null) {
// add layer
this.addRemoveLayer();
if (addend > 0) {
opacity = 0;
} else if (addend < 0) {
opacity = this.maxLayerOpacity;
} else {
return;
}
} else {
opacity = arguments[1];
}
opacity += addend;
// prevent rounding errors
opacity = Math.round(opacity * 10) / 10;
// if maximum or minimum is exceeded
if (opacity > this.maxLayerOpacity) {
return;
} else if (opacity < 0) {
// remove layer before exit
this.addRemoveLayer();
return;
}
// check for Internet Explorer
if (navigator.userAgent.indexOf('MSIE') > -1) {
this.layerElement.style.filter = 'Alpha(opacity=' + (opacity * 100) + ')';
} else {
this.layerElement.style.opacity = opacity;
}
setTimeout('pageLayer.fadeLayer(' + addend + ', ' + opacity + ');', 20);
}
};
|
Mein Dokument mit dem SWF-Player:
| Code: |
<div id="player"><script> Player </script></div>
<a href="#" onClick="javascript:pageLayer.fadeLayer(0.05);">Kinomodus</a>
|
Jetzt stellt sich mir nur ein Problem: Der Player wird auch verdunkelt, das war nicht mein Ziel. Wenn ich die ID "Player" per CSS auf "postion: absolute;" setze, funktioniert es. Jedoch zerschiesst mir das meine gesamte Seite.
Kann man das eleganter, wenn möglich ohne "position: absolute;", sondern direkt im Javascript lösen?
Danke an alle helfenden Hände! 
Edit: Ahh! Ich sehe in deiner Lösung ist das Problem per z-index gelöst!
Zuletzt bearbeitet von kramsen am Do 22.09.2011 17:09, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Wie realisieren?
[flash, 3d, ai] wie realisieren?
Zinsrechner in PHP realisieren
Quiz in ASP realisieren
Schräge Menübuttons realisieren
Bildersuchfunktion mit Checkboxen. Wie realisieren?
|
|
Willkommen auf dem Portal für Mediengestalter
