Fancybox verzögert starten und schließen
maze
- multimedia (audio & video)
Hallo,
Ich möchte meine Fancybox beim öffnen meiner Seite automatisch starten und nach abspielen ihres Inhaltes (Vimeo-Video) automatisch schließen.
Das automatisch starten habe ich schon hinbekommen.
Mein Problem ist jetzt das meine Website beim aufrufen(laden) automatisch (soft) zu einem bestimmten Anker scrollt (softscroll.js).
Der Player (Fancybox) wird also automatisch oben links auf der Seite geöffnet und gestartet nicht aber an der Stelle zu der gescrollt wurde.
Ich hatte schon die Idee, das die Fancybox etwas verzögert geöffnet werden müsste damit sie die 'Koordinaten' zum öffnen erst nach dem scrollen nimmt.
Gibt es also eine möglichkeit der Fancybox zu sagen das sie sich erst nach öffnen/laden der Seite und nach dem scrollen sprich nach wenigen Sekunden öffnen soll?
Wäre euch sehr dankbar für jegliche Hilfe!
Danke!
P.S. und wie kann man der Fancybox sagen das sie nach beendetem abspielen des Videos automatisch schließen soll?
Das automatisch starten habe ich schon hinbekommen.
Ista uch kein Thema.
Gibt es also eine möglichkeit der Fancybox zu sagen das sie sich erst nach öffnen/laden der Seite und nach dem scrollen sprich nach wenigen Sekunden öffnen soll?
Setze einen Timeout.
P.S. und wie kann man der Fancybox sagen das sie nach beendetem abspielen des Videos automatisch schließen soll?
Das ist nicht möglich, da der Vimeo-Player deinem JavaScript nichts anschaffen darf (SOP).
Mit einem alternativen Player - FlowPlayer - ist sowas aber kein Problem, da gibts genug Events um das zu regeln.
Cool, vielen Dank für deine Antwort.
Wenn du mir jetzt noch sagen könntest wie ich diesen Timeout in meinen Code bekomme würdest du mir einen großen Gefallen tun.
<script type="text/javascript">
$(window).load(function() {
$.fancybox({
'width': '100%',
'height': '100%',
'autoScale': 'true',
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://player.vimeo.com/video/22166821?title=0&byline=0&autoplay=1;portrait=0;'
});
});
</script>
Danke!!!
Entweder du schiebst erzeugst eine queue() und nutzt ganz einfach delay() oder du nimmst JavaScript-Bordmittel - window.setTimeout ist dir hoffentlich ein Begriff?
Da ich absoluter Anfänger bin und mir auch google für den Timeout in meinem Fall nicht weiterhilft, wäre es echt ganz ganz toll wenn du mir kurz anhand meines Codes zeigen könntest wie ich den Timeout einbaue.
Danke!
Da ich absoluter Anfänger bin und mir auch google für den Timeout in meinem Fall nicht weiterhilft, wäre es echt ganz ganz toll wenn du mir kurz anhand meines Codes zeigen könntest wie ich den Timeout einbaue.
<http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=Den hier> noch nicht gelesen?
Hatte ich schon gefunden und habe auch einige Varianten ausprobiert, hat aber alles nicht funktioniert, aus dem einfachen Grund das ich nicht genau weiß wo was hin muss.
Hab es so probiert, hat aber nicht funktioniert:
<script type="text/javascript">
$(window).load(function() {
$.fancybox({
'width': '100%',
'height': '100%',
'autoScale': 'true',
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://player.vimeo.com/video/22166821?title=0&byline=0&autoplay=1;portrait=0;'
}
window.setTimeout("$.fancybox", 10000);
</script>
Hatte ich schon gefunden und habe auch einige Varianten ausprobiert, hat aber alles nicht funktioniert, aus dem einfachen Grund das ich nicht genau weiß wo was hin muss.
Dann wird es aber zeit, das du dir Grundlagen aneignest :)
Das hier wäre der jQuery-Ansatz mit Delay und der Queue, wie schon angesprochen:
Wenn das DOM komplett ist (gerne auch beim load-Event) wird ans Dokument mit einer 5-sekündigen Verzögerung etwas in die Queue geschoben.
Mit anderen Worten: erst 5 Sekunden nach fertigstellung des DOM gibts den Alert.
$(document).ready(function() {
$(this).delay(5000).queue(
function() {
alert('foo');
}
);
});
Ich bin ja schon dabei mir Grundlagen anzueignen, aber das dauert halt ein wenig und außerdem lerne ich immer gerne beim tuen.
Ok, nach deinem Hinweis habe ich folgendes ausprobiert:
$(document).ready(function() {
$(this).delay(5000).queue(
function() {
$.fancybox({
'width': '100%',
'height': '100%',
'autoScale': 'true',
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://player.vimeo.com/video/22166821?title=0&byline=0&autoplay=1;portrait=0;'
});
}
);
});
Hat leider nicht geklappt.
Was mache ich falsch?
Was mache ich falsch?
Sieht augenscheinlich OK aus - irgendwelche Dinge in der Fehlerkonsole zu sehen?