Javascript 在图像选择上创建新图层

我有一个html5分区块：

    <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>

这会将数据绑定到jplayer，但当我更改图像时，它不会更新

关于如何使此工作正常进行的任何建议，以便：

在页面显示上，初始jplayer加载与艺术家图像对应的音乐文件

当用户从菜单中单击缩略图时，jplayer音乐文件将相应更新

---

非常感谢任何指针。

修复，您可以看到更改

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();
});​

  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);