CSS 스타일링 jQuery로 만든 JPlayer 요소

Question

JPlayer (HTML5 오디오/비디오 플레이어)의 인스턴스를 스타일링하고 이상한 작은 장애물을 맞았습니다. 일부 요소 (너비, 높이, 배경)를 설정하려면 ID로 요소를 호출하지만 올바른 결과는 보이지 않습니다. 나는 확실히 뭔가를 놓치고있어! bg 이미지로 적절한 100x100 픽셀 썸네일을 보는 대신 배경 이미지는 요소 내의 링크 뒤에 만 표시되므로 60x20px (ish) 인 것처럼 보입니다.

무엇이 누락 되었습니까?

도움 주셔서 감사합니다.

내가 편집 할 노력하고있어 요소는

jsFiddle 자바 스크립트를 통해 페이지에 추가됩니다 추신 : http://jsfiddle.net/danielredwood/MmvJX/1/

HTML :

<div id="container"> 
    <div id="jquery_jplayer_2" class="jp-jplayer"></div> 

    <div class="jp-audio"> 
     <div class="jp-type-playlist"> 
      <div id="jp_interface_2" class="jp-interface"> 
       <ul class="jp-controls"> 
        <li><a href="#" class="jp-play" tabindex="1">play</a></li> 
        <li><a href="#" class="jp-pause" tabindex="1">pause</a></li> 
        <li><a href="#" class="jp-stop" tabindex="1">stop</a></li> 
        <li><a href="#" class="jp-previous" tabindex="1">previous</a></li> 
        <li><a href="#" class="jp-next" tabindex="1">next</a></li> 
       </ul> 
       <div class="jp-progress"> 
        <div class="jp-seek-bar"> 
         <div class="jp-play-bar"></div> 
        </div> 
       </div> 
       <div class="jp-current-time"></div> 
       <div class="jp-duration"></div> 
      </div> 
      <div id="jp_playlist_2" class="jp-playlist"> 
       <ul> 
        <!-- The method Playlist.displayPlaylist() uses this unordered list --> 
        <li></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

CSS :

li { 
    list-style-type: none; 
    float:left; 
} 
#jp_playlist_2_item_0 { 
    width:100px; 
    height:100px; 
    background:url(http://a4.mzstatic.com/us/r2000/011/Music/f1/98/7f/mzi.qlkzqpmu.100x100-75.jpg); 

} 

자바 스크립트 :

당신이 요소를 제대로 스타일링하지 않기 때문에 귀하의 CSS가 작동하지

//<![CDATA[ 
$(document).ready(function(){ 

    var Playlist = function(instance, playlist, options) { 
     var self = this; 

     this.instance = instance; // String: To associate specific HTML with this playlist 
     this.playlist = playlist; // Array of Objects: The playlist 
     this.options = options; // Object: The jPlayer constructor options for this playlist 

     this.current = 0; 

     this.cssId = { 
      jPlayer: "jquery_jplayer_", 
      interface: "jp_interface_", 
      playlist: "jp_playlist_" 
     }; 
     this.cssSelector = {}; 

     $.each(this.cssId, function(entity, id) { 
      self.cssSelector[entity] = "#" + id + self.instance; 
     }); 

     if(!this.options.cssSelectorAncestor) { 
      this.options.cssSelectorAncestor = this.cssSelector.interface; 
     } 

     $(this.cssSelector.jPlayer).jPlayer(this.options); 

     $(this.cssSelector.interface + " .jp-previous").click(function() { 
      self.playlistPrev(); 
      $(this).blur(); 
      return false; 
     }); 

     $(this.cssSelector.interface + " .jp-next").click(function() { 
      self.playlistNext(); 
      $(this).blur(); 
      return false; 
     }); 
    }; 

    Playlist.prototype = { 
     displayPlaylist: function() { 
      var self = this; 
      $(this.cssSelector.playlist + " ul").empty(); 
      for (i=0; i < this.playlist.length; i++) { 
       var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>"; 
       listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>"; 

       // Associate playlist items with their media 
       $(this.cssSelector.playlist + " ul").append(listItem); 
       $(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() { 
        var index = $(this).data("index"); 
        if(self.current !== index) { 
         self.playlistChange(index); 
        } else { 
         $(self.cssSelector.jPlayer).jPlayer("play"); 
        } 
        $(this).blur(); 
        return false; 
       }); 

      } 
     }, 
     playlistInit: function(autoplay) { 
      if(autoplay) { 
       this.playlistChange(this.current); 
      } else { 
       this.playlistConfig(this.current); 
      } 
     }, 
     playlistConfig: function(index) { 
      $(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current"); 
      $(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current"); 
      this.current = index; 
      $(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]); 
     }, 
     playlistChange: function(index) { 
      this.playlistConfig(index); 
      $(this.cssSelector.jPlayer).jPlayer("play"); 
     }, 
     playlistNext: function() { 
      var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0; 
      this.playlistChange(index); 
     }, 
     playlistPrev: function() { 
      var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1; 
      this.playlistChange(index); 
     } 
    }; 

    var audioPlaylist = new Playlist("2", [ 
     { 
      name:"Paparazzi", 
      mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.mp3", 
      oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.ogg", 
      wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.wav" 
     }, 
     { 
      name:"Dance In The Dark", 
      mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_danceinthedark.mp3", 
      oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_danceinthedark.ogg", 
      wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_danceinthedark.wav" 
     }, 
     { 
      name:"Born This Way", 
      mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_bornthisway.mp3", 
      oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_bornthisway.ogg", 
      wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_bornthisway.wav" 
     } 

    ], { 
     ready: function() { 
      audioPlaylist.displayPlaylist(); 
      audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay. 
     }, 
     ended: function() { 
      audioPlaylist.playlistNext(); 
     }, 
     play: function() { 
      $(this).jPlayer("pauseOthers"); 
     }, 
     swfPath: "../js", 
     supplied: "oga, mp3" 
    }); 
}); 
//]]> 

Answer 1

; height 및 width 속성은 inline 요소에는 적용되지 않으므로 배경이 제대로 작동하지 않습니다. 그래서 여기

#jp_playlist_2_item_0 { 
    display: block; 

나는 문제가 다른 모르겠어요 작동하는 데모입니다 : 다음은 수정의 http://jsfiddle.net/sE4mZ/