Using jPlayer with lyrics and colorbox

490 views
Skip to first unread message

Tpresto

unread,
Nov 29, 2010, 3:11:07 AM11/29/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hey everyone,

I have searched for something similar to what I am looking to do and
can't find any answers. If there is a thread already about this
please direct me towards it.

Currently I have a site up at http://finishfirstmusic.com/


I have jplayer playing fine and working correctly, I even have the
"lyrics" section showing up next to each song. What I am trying to do
is when someone clicks on the lyrics it calls upon the colorbox
feature to show the lyrics for that song.

I have messed around with the coding to try and get this to work but
am having no luck. Currently I just put it back to normal (with the
exception of leaving the "lyrics" part.

Any help would be greatly appreciated!

Thanks,
Tommy P.

Maboa

unread,
Nov 29, 2010, 3:40:41 AM11/29/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hi Tommy,

Can you expand upon what the colorbox feature should do?

Thanks

Mark B

On Nov 29, 9:11 am, Tpresto <to...@prestodesigns.com> wrote:
> Hey everyone,
>
> I have searched for something similar to what I am looking to do and
> can't find any answers.  If there is a thread already about this
> please direct me towards it.
>
> Currently I have a site up athttp://finishfirstmusic.com/

Tpresto

unread,
Nov 29, 2010, 4:28:00 AM11/29/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hi Mark,

I am trying to do an effect like this shown here:
http://colorpowered.com/colorbox/core/example1/index.html
When you get to that page click "inline HTML"

When someone click on "lyrics" next to the song title in jPlayer I
want the colorbox to pop up with the lyrics inside of it.

Does this help?

Thanks for the quick response!
Tommy P

Maboa

unread,
Nov 29, 2010, 4:54:51 AM11/29/10
to jPlayer: the CSS styleable jQuery audio player plugin
Tommy,

You probably want to call colorbox from :

$("#jplayer_playlist_item_"+i).data( "index",
i ).click( function() {
var index = $(this).data("index");
if (playItem != index) {
playListChange( index );
} else {
$("#jquery_jplayer").jPlayer("play");
}
});

and / or from the lyric link but I don't think that is a jPlayer
issue.

Also a 'return false' will stop it jumping to the top of the page or
conceivably preventDefault() (see http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)

Cheers

Mark

Tpresto

unread,
Dec 3, 2010, 3:25:50 AM12/3/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hi Mark,

Thank you for your help. To be honest though I am still learning
javascript and jQuery so I am not sure how to call upon it. I have
created a new page that is strictly the jPlayer and Colorbox and I
have been trying tons of different ways out but it is all guess and
test right now. All the functions work correct on their own. I just
need to somehow get them to work together. You can view it here:
http://www.prestodesigns.com/colorbox

Any additional help would be appreciated.



On Nov 29, 2:54 am, Maboa <mark.b...@gmail.com> wrote:
> Tommy,
>
> You probably want to call colorbox from :
>
>                         $("#jplayer_playlist_item_"+i).data( "index",
> i ).click( function() {
>                                 var index = $(this).data("index");
>                                 if (playItem != index) {
>                                         playListChange( index );
>                                 } else {
>                                         $("#jquery_jplayer").jPlayer("play");
>                                 }
>                         });
>
> and / or from the lyric link but I don't think that is a jPlayer
> issue.
>
> Also a 'return false' will stop it jumping to the top of the page or
> conceivably preventDefault() (seehttp://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)

Tpresto

unread,
Dec 3, 2010, 3:59:32 AM12/3/10
to jPlayer: the CSS styleable jQuery audio player plugin
Ok so I have made some progress. I have found another jPlayer that
does something similar, but not entirely what I want. I have updated
the page at http://www.prestodesigns.com/colorbox

What it is doing is calling to open a new window. I would think it
shouldn't be too hard to go from here but now I am stuck at this point-
lol
Reply all
Reply to author
Forward
0 new messages