Ho alcune miniature dei video su una pagina web. Quando faccio clic su uno, voglio che un fancybox si apra e riproduca il video Vimeo senza barre nere, quindi le proporzioni devono essere corrette. Sfortunatamente, fancybox non è in grado di rilevare la giusta larghezza e altezza del video.
Ho scritto del codice jquery ma sono bloccato nell'ultimo passaggio:
var $height = screen.height/2;
var $aspectRatio = 16/9; // Default aspect ratio
var $width = $aspectRatio * $height; // Default width
$("a.fancybox-media").fancybox({
openEffect : "none",
closeEffect : "none",
width : $width,
height : $height,
autoDimensions : false,
beforeLoad : function() {
var $vimeoVideoID = jsTheme.fancybox.getVimeoId(this.href);
$.getJSON("http://www.vimeo.com/api/v2/video/" + $vimeoVideoID + ".json?callback=?", {format: "json"}, function(data) {
// Calculate aspect ratio & new width
$aspectRatio = data[0].width / data[0].height;
$width = $aspectRatio * $height;
}).done(function() {
// Resize fancybox to this width & height. Doesn"t work!
this.width = $width;
this.height = $height;
});
}
});
Posso fare la chiamata API e recuperare la larghezza e l'altezza dall'API Vimeo. Calcolo la nuova larghezza in base a queste proporzioni. Ma non posso impostare la larghezza. Anche se codifico la larghezza nel file done
funzione come this.width = "3000"
non aggiorna fancybox.
Se metto this.width = "3000"
al di fuori della funzione svolta, funziona. Sembra che non riesca ad aggiornare fancybox dalla funzione finita. Posso forzare questo aggiornamento? Qualcuno ha un suggerimento?
risposte:
0 per risposta № 1Prova questo : (Ottieni prima i dati, quindi apri Fancybox)
var id = 132693003;
$.ajax({
dataType: "json",
url: "http://www.vimeo.com/api/v2/video/" + id + ".json?callback=?",
success: function (json) {
var w = json[0]["width"];
var h = json[0]["height"];
$.fancybox.open({
width: w,
height: h,
maxWidth: 1240,
padding: 0,
type: "iframe",
aspectRatio: true,
scrolling : "no",
href: "//player.vimeo.com/video/" + id + "?color=d50000&autoplay=1&hd=1&show_title=0&show_byline=0&show_portrait=0&fullscreen=1"
});
}
});
PS : Senza supporto multimediale Fancybox</ Em>