私はこのhtml5 divブロックを持っています:
<div id="st_main">
<img src="/artistes/david_merlo/David_Merlo_Solo_PosteaGalene_2011_Ulrike_Monso.jpg" alt="" class="st_preview" style="display:none;" />
<div class="st_overlay"></div>
<ul class="menu">
<li>
<a href="#">Les Artistes</a>
<div class="sc_menu_wrapper">
<div class="sc_menu">
<a href="#" m4v="/artistes/diez/diez_demo.m4a" oga="/artistes/diez/diez_demo.ogg" mp3="/artistes/diez/diez_demo.mp3"><img src="/artistes/david_merlo/david_merlo_thumb.jpg" alt="/artistes/david_merlo/David_Merlo_Solo_PosteaGalene_2011_Ulrike_Monso.jpg"></a>
<a href="#" m4v="/artistes/david_merlo/diez_demo.m4a" oga="/artistes/david_merlo/diez_demo.ogg" mp3="/artistes/david_merlo/diez_demo.mp3"><img src="/artistes/nicolas-dick/L'Embobineuse_avec_phil_niblock.jpg" alt="/artistes/nicolas-dick/concert_glazart_du_25_02.jpg"></a>
<a href="#" m4v="/audio/01_Tribu.m4a" oga="/audio/01_Tribu.ogg" mp3="/audio/01_Tribu.mp3"><img src="/artistes/jean-luc_gergonne/jlgergonne_thumb.jpg" alt="/artistes/jean-luc_gergonne/jlgergonne.jpg"></a>
<a href="#" m4v="/artistes/diez/diez_demo.m4a" oga="/artistes/diez/diez_demo.ogg" mp3="/artistes/diez/diez_demo.mp3"><img src="/artistes/diez/diez_130x195.jpeg" alt="/artistes/diez/diez.jpeg"></a>
</div>
</div>
</li>
</ul>
<div class="zen">
<span class="player"></span>
<span class="circle"></span>
<span class="progress"></span>
<span class="buffer"></span>
<span class="drag"></span>
<div class="button">
<span class="icon play"></span>
<span class="icon pause"></span>
</div>
</div>
</div>
私のjavascriptコードは次のとおりです。
function tsunamiClient() {
var self = this;
var width = $(".menu").width();
//the ul element
var $list = $('.menu');
//the current image being shown
var $currImage = $('#st_main').children('img:first');
//let's load the current image
//and just then display the navigation menu
$('<img>').load(function(){
$currImage.fadeIn(3000);
//slide out the menu
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));
this.init = function() {
self.sliderMenu();
};
// Slider Menu
this.sliderMenu = function() {
/* function to make the thumbs menu scrollable */
//clicking on a thumb, replaces the large image
$list.find('.sc_menu img').bind('click',function(){
var $this = $(this);
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//the loading image
function buildThumbs($elem){
var $wrapper = $elem.next();
var $menu = $wrapper.find('.sc_menu');
var inactiveMargin = 150;
/* move the scroll down to the
beggining (move as much as the height of the menu) */
$wrapper.scrollTop($menu.outerHeight());
/* when moving the mouse up or down, the wrapper moves (scrolls) up or down */
$wrapper.bind('mousemove',function(e){
var wrapperHeight = $wrapper.height();
var menuHeight = $menu.outerHeight() + 2 * inactiveMargin;
var top = (e.pageY - $wrapper.offset().top) * (menuHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
$wrapper.scrollTop(top+10);
});
}
var stacktime;
$('.menu li > a').bind('mouseover',function () {
var $this = $(this);
buildThumbs($this);
var pos = $this.next().find('a').size();
var f = function(){
if(pos==0) clearTimeout(stacktime);
$this.next().find('a:nth-child('+pos+')').css('visibility','visible');
--pos;
};
/* each thumb will appear with a delay */
stacktime = setInterval(f , 50);
});
/* on mouseleave of the whole <li> the scrollable area is hidden */
$('.menu li').bind('mouseleave',function () {
var $this = $(this);
clearTimeout(stacktime);
$this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden');
$this.find('.sc_menu_wrapper').css('visibility','hidden');
});
/* when hovering a thumb, change its opacity */
$('.sc_menu a').hover(
function () {
var $this = $(this);
$this.find('img')
.stop()
.animate({'opacity':'1.0'},400);
},
function () {
var $this = $(this);
$this.find('img')
.stop()
.animate({'opacity':'0.3'},400);
}
);
};
// jPlayer
this.tsunamiPlayer = function(music) {
///init screen
var player = $(".zen .player");
var no_of_tracks = $(".sc_menu a").length;
player.jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: m4a,
mp3: mp,
oga: oga
});
},
swfPath: "/js/jplayer/Jplayer.swf",
supplied: "m4a, mp3, oga"
});
// preload, update, end
player.bind($.jPlayer.event.progress, function(event) {
var audio = $('.zen audio').get(0);
var pc = 0;
if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
pc = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);
displayBuffered(pc);
//console.log(pc);
if(pc >= 99) {
//console.log("loaded");
$('.zen .buffer').addClass("loaded");
}
}
});
//player.bind($.jPlayer.event.loadeddata, function(event) {
//$('.zen .buffer').addClass("loaded");
//});
player.bind($.jPlayer.event.timeupdate, function(event) {
var pc = event.jPlayer.status.currentPercentAbsolute;
if (!dragging) {
displayProgress(pc);
}
});
player.bind($.jPlayer.event.ended, function(event) {
$('.zen .circle').removeClass( "rotate" );
$(".zen").removeClass( "play" );
$('.zen .progress').css({rotate: '0deg'});
status = "stop";
});
// play/pause
$(".zen .button").bind('mousedown', function() {
// not sure if this can be done in a simpler way.
// when you click on the edge of the play button, but button scales down and doesn't drigger the click,
// so mouseleave is added to still catch it.
$(this).bind('mouseleave', function() {
$(this).unbind('mouseleave');
onClick();
});
});
$(".zen .button").bind('mouseup', function() {
$(this).unbind('mouseleave');
onClick();
});
function onClick() {
if(status != "play") {
status = "play";
$(".zen").addClass( "play" );
player.jPlayer("play");
} else {
$('.zen .circle').removeClass( "rotate" );
$(".zen").removeClass( "play" );
status = "pause";
player.jPlayer("pause");
}
};
// draggin
var clickControl = $('.zen .drag');
clickControl.grab({
onstart: function(){
dragging = true;
$('.zen .button').css( "pointer-events", "none" );
}, onmove: function(event){
var pc = getArcPc(event.position.x, event.position.y);
player.jPlayer("playHead", pc).jPlayer("play");
displayProgress(pc);
}, onfinish: function(event){
dragging = false;
var pc = getArcPc(event.position.x, event.position.y);
player.jPlayer("playHead", pc).jPlayer("play");
$('.zen .button').css( "pointer-events", "auto" );
}
});
// functions
function displayProgress(pc) {
var degs = pc * 3.6+"deg";
$('.zen .progress').css({rotate: degs});
}
function displayBuffered(pc) {
var degs = pc * 3.6+"deg";
$('.zen .buffer').css({rotate: degs});
}
function getArcPc(pageX, pageY) {
var self = clickControl,
offset = self.offset(),
x = pageX - offset.left - self.width()/2,
y = pageY - offset.top - self.height()/2,
a = Math.atan2(y,x);
if (a > -1*Math.PI && a < -0.5*Math.PI) {
a = 2*Math.PI+a;
}
// a is now value between -0.5PI and 1.5PI
// ready to be normalized and applied
var pc = (a + Math.PI/2) / 2*Math.PI * 10;
return pc;
}
};
// end jPlayer
// Initialise
this.init();
};
var tsunamiClient;
jQuery(function() {
tsunamiClient = new tsunamiClient();
});
これは私がこれまでに持っているものですhttp://jsfiddle.net/aqoon/VUGL8/
ユーザーがページに来て、jPlayerの再生ボタンをクリックすると、表示されている画像に対応する音楽を再生できるようにしたいので、機能しません。同様に、ユーザーが「sc_menu」から画像を選択すると、画像が更新され、新しい jplayer インスタンスも作成されます。
$list.find('.sc_menu img').bind('click',function(){ var $this = $(this); の直後にこのコードを追加しました。
var link = $this.parent();
var music;
title = link.text();
mp = link.attr("mp3");
oga = link.attr("oga");
m4a = link.attr("m4a");
m4v = link.attr("m4v");
ogv = link.attr("ogv");
webmv = link.attr("webmv");
poster = link.attr("poster");
music = {
title: title,
mp: mp,
oga: oga,
m4a: m4a,
ogv: ogv,
webmv: webmv,
poster: poster,
}
self.tsunamiPlayer(music);
これはデータをjplayerにバインドしますが、画像を変更しても更新されません。
これを機能させるためのアドバイス:
ページ表示で、最初の jplayer がアーティストの画像に対応する音楽ファイルを読み込みます
ユーザーがメニューからサムネイル画像をクリックすると、それに応じて jplayer 音楽ファイルが更新されます。
どんなポインタでも大歓迎です。