Que tal!?
Necesito una mano en algo que no creo que sea complicado, se trata de
addClass y
removeClass, que todabia no se muy bien como utilizarlos....
La idea es modificar la apariencia de este reproductor en
jQuery; el diseño original muestra los botones de reproduccion; barra de progreso, volumen, y una lista de las temas a reproducir....
Lo que quiero hacer es ocultar la lista de temas; mostrar digamos la cancion que se reproduce actualmente... no el listado por completo...
Imagino que haciendo algo con "
display:none" se puede lograr lo que quiero, estube probandolo pero no logro lo que quiero....
EL codigo del reproductor jQuery (jPlayer se llama el plugin) a modificar es el siguiente:
Código javascript
:
Ver original/////Este es el codigo que da las ordenes al plugin....
$(document).ready(function(){
var playItem = 0;
var myPlayList = [
{name:"Tempered Song",mp3:"mp3/Miaow-01-Tempered-song.mp3",ogg:"ogg/Miaow-01-Tempered-song.ogg"},
{name:"Hidden",mp3:"mp3/Miaow-02-Hidden.mp3",ogg:"ogg/Miaow-02-Hidden.ogg"},
{name:"Lentement",mp3:"mp3/Miaow-03-Lentement.mp3",ogg:"ogg/Miaow-03-Lentement.ogg"},
{name:"Lismore",mp3:"mp3/Miaow-04-Lismore.mp3",ogg:"ogg/Miaow-04-Lismore.ogg"},
{name:"The Separation",mp3:"mp3/Miaow-05-The-separation.mp3",ogg:"ogg/Miaow-05-The-separation.ogg"},
{name:"Beside Me",mp3:"mp3/Miaow-06-Beside-me.mp3",ogg:"ogg/Miaow-06-Beside-me.ogg"},
{name:"Partir",mp3:"mp3/Miaow-09-Partir.mp3",ogg:"ogg/Miaow-09-Partir.ogg"},
{name:"Thin Ice",mp3:"mp3/Miaow-10-Thin-ice.mp3",ogg:"ogg/Miaow-10-Thin-ice.ogg"}
];
$("#jquery_jplayer").jPlayer({
ready: function() {
displayPlayList();
playListInit(true); // Parameter is a boolean for autoplay.
demoInstanceInfo($(this), $("#jplayer_info"));
},
oggSupport: true
})
.jPlayerId("play", "player_play")
.jPlayerId("pause", "player_pause")
.jPlayerId("stop", "player_stop")
.jPlayerId("loadBar", "player_progress_load_bar")
.jPlayerId("playBar", "player_progress_play_bar")
.jPlayerId("volumeMin", "player_volume_min")
.jPlayerId("volumeMax", "player_volume_max")
.jPlayerId("volumeBar", "player_volume_bar")
.jPlayerId("volumeBarValue", "player_volume_bar_value")
.onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
var myPlayedTime = new Date(playedTime);
var ptMin = (myPlayedTime.getUTCMinutes() < 10) ? "0" + myPlayedTime.getUTCMinutes() : myPlayedTime.getUTCMinutes();
var ptSec = (myPlayedTime.getUTCSeconds() < 10) ? "0" + myPlayedTime.getUTCSeconds() : myPlayedTime.getUTCSeconds();
$("#play_time").text(ptMin+":"+ptSec);
var myTotalTime = new Date(totalTime);
var ttMin = (myTotalTime.getUTCMinutes() < 10) ? "0" + myTotalTime.getUTCMinutes() : myTotalTime.getUTCMinutes();
var ttSec = (myTotalTime.getUTCSeconds() < 10) ? "0" + myTotalTime.getUTCSeconds() : myTotalTime.getUTCSeconds();
$("#total_time").text(ttMin+":"+ttSec);
})
.onSoundComplete( function() {
playListNext();
});
$("#ctrl_prev").click( function() {
playListPrev();
return false;
});
$("#ctrl_next").click( function() {
playListNext();
return false;
});
function displayPlayList() {
for (i=0; i < myPlayList.length; i++) {
$("#playlist_list ul").append("<li id='playlist_item_"+i+"'>"+ myPlayList[i].name +"</li>");
$("#playlist_item_"+i).data( "index", i ).hover(
function() {
if (playItem != $(this).data("index")) {
$(this).addClass("playlist_hover");
}
},
function() {
$(this).removeClass("playlist_hover");
}
).click( function() {
var index = $(this).data("index");
if (playItem != index) {
playListChange( index );
}
});
}
}
function playListInit(autoplay) {
if(autoplay) {
playListChange( playItem );
} else {
playListConfig( playItem );
}
}
function playListConfig( index ) {
$("#playlist_item_"+playItem).removeClass("playlist_current");
$("#playlist_item_"+index).addClass("playlist_current");
playItem = index;
$("#jquery_jplayer").setFile(myPlayList[playItem].mp3, myPlayList[playItem].ogg);
}
function playListChange( index ) {
playListConfig( index );
$("#jquery_jplayer").play();
}
function playListNext() {
var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
playListChange( index );
}
function playListPrev() {
var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
playListChange( index );
}
});
Y el CSS es:
Código CSS:
Ver original#player_container {
position: relative;
background-color:#eee;
width:418px;
height:80px;
border:1px solid #009be3;
}
#player_container ul#player_controls {
list-style-type:none;
padding:0;
margin: 0;
}
#player_container ul#player_controls li {
overflow:hidden;
text-indent:-9999px;
}
#player_play,
#player_pause {
display: block;
position: absolute;
left:48px;
top:20px;
width:40px;
height:40px;
cursor: pointer;
}
#player_play {
background: url("images/spirites.jpg") 0 0 no-repeat;
}
#player_play.jqjp_hover {
background: url("images/spirites.jpg") -41px 0 no-repeat;
}
#player_pause {
background: url("images/spirites.jpg") 0 -42px no-repeat;
}
#player_pause.jqjp_hover {
background: url("images/spirites.jpg") -41px -42px no-repeat;
}
#ctrl_prev {
position: absolute;
left:20px;
top:26px;
background: url("images/spirites.jpg") 0 -112px no-repeat;
width:28px;
height:28px;
cursor: pointer;
}
#ctrl_prev:hover {
background: url("images/spirites.jpg") -29px -112px no-repeat;
}
#ctrl_prev.disabled {
background: url("images/spirites.jpg") -58px -112px no-repeat;
cursor:default;
}
#ctrl_next {
position: absolute;
left:88px;
top:26px;
background: url("images/spirites.jpg") 0 -141px no-repeat;
width:28px;
height:28px;
cursor: pointer;
}
#ctrl_next:hover {
background: url("images/spirites.jpg") -29px -141px no-repeat;
}
#ctrl_next.disabled {
background: url("images/spirites.jpg") -58px -141px no-repeat;
cursor:default;
}
#player_stop {
position: absolute;
left:126px;
top:26px;
background: url("images/spirites.jpg") 0 -83px no-repeat;
width:28px;
height:28px;
cursor: pointer;
}
#player_stop.jqjp_hover {
background: url("images/spirites.jpg") -29px -83px no-repeat;
}
#player_progress {
position: absolute;
left:164px;
top:32px;
background-color: #eee;
width:122px;
height:15px;
}
#player_progress_load_bar {
background: url("images/bar_load.gif") top left repeat-x;
width:0px;
height:15px;
cursor: pointer;
}
#player_progress_load_bar.jqjp_buffer {
background: url("images/bar_buffer.gif") top left repeat-x;
}
#player_progress_play_bar {
background: url("images/bar_play.gif") top left repeat-x ;
width:0px;
height:15px;
}
#player_volume_min {
position: absolute;
left:296px;
top:32px;
background: url("images/spirites.jpg") 0 -170px no-repeat;
width:18px;
height:15px;
cursor: pointer;
}
#player_volume_max {
position: absolute;
left:368px;
top:32px;
background: url("images/spirites.jpg") 0 -186px no-repeat;
width:18px;
height:15px;
cursor: pointer;
}
#player_volume_min.jqjp_hover {
background: url("images/spirites.jpg") -19px -170px no-repeat;
}
#player_volume_max.jqjp_hover {
background: url("images/spirites.jpg") -19px -186px no-repeat;
}
#player_volume_bar {
position: absolute;
left:314px;
top:37px;
background: url("images/volume_bar.gif") repeat-x top left;
width:46px;
height:5px;
cursor: pointer;
}
#player_volume_bar_value {
background: url("images/volume_bar_value.gif") repeat-x top left;
width:0px;
height:5px;
}
#play_time,
#total_time {
position: absolute;
left:164px;
top:49px;
width:122px;
font-size:.8em;
font-style:oblique;
}
#total_time {
text-align: right;
}
#playlist_list {
width:418px;
}
#playlist_list ul{
list-style-type:none;
padding:10px 20px 20px 20px;
margin:0 0 10px 0;
background-color:#ccc;
border:1px solid #009be3;
border-top:none;
width:378px;
font-size:.9em;
}
#playlist_list li{
padding:4px 0 4px 20px;
border-bottom:1px solid #eee;
cursor: pointer;
}
#playlist_list li.playlist_current{
color:#0d88c1;
list-style-type:square;
list-style-position:inside;
padding-left:6px;
cursor: default;
}
#playlist_list li.playlist_hover {
color:#0d88c1;
}
.miaow {
font-size:.8em;
color:#999;
}
.miaow a:link, a:visited, a:hover, a:focus, a:active {
color:#009be3;
}
Saludos!
Gracias por la ayuda que brinda siempre este foro!