Anyway to override jquery.jplayer.min.js?

MAD
@madc
10 years ago
600 posts

Ok I want the album covers ( Poster image ) to be displayed in a playlist player.
I have narrowed it down to the jquery.jplayer.min.js file and can change the audio height and width.
But it is a core js file that will be overriden.
The default for this section is 0 ( which to me is quite strange )
People love visuals and for this to be added yet by default hidden is quite bizarre.
I edited this in the JS file and it showed the image no problems

optionsAudio:{size:{width:"0px",height:"0px",cssClass:""}

i changed it to

optionsAudio:{size:{width:"100px",height:"100px",cssClass:""}

So how do i get the image to display without overwriting the core?
Be great to add the image, song title and band name to a div above the playlist player.

I found this post

https://groups.google.com/forum/#!searchin/jplayer/poster$20image/jplayer/m7GEIw4hbSM/e3NVLrXlTA0J

but can't work out where to put the code to override? ( 3rd post )

optionsAudio: {
                size: {
                    width: "0px",
                    height: "0px",
                    cssClass: ""
                },

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

updated by @madc: 04/15/14 10:14:16AM

@brian
10 years ago
10,148 posts

What you want to do is "override" the player template - i.e. of you want override the Audio dark player, which is this template:

modules/jrAudio/templates/jrAudio_player_dark.tpl

You would create a file in your active skin directory:

skins/SkinName/jrAudio_jrAudio_player_dark.tpl

and you'll see at the top the JS section you can modify to suit your needs.

I'm not sure why we never set this in our players, but can check it out.

Hope this helps!

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

MAD
@madc
10 years ago
600 posts

ok i added lots tonight and nothing worked.
it doesn't seem to be honouring the template override.
Whatever I do, it's called before the end result and everything is still set to 0px
It is calling the uniqid js and shows in the source
but then the player just reverts back to 0 in the next section

This is the last code I used but I tried a lot of different variations,
with and without the cssClass
( and yes I had the commas left out from the last line and changed from " to ' and back - no difference )
So any ideas??

        playlistOptions: {
            autoPlay: {$autoplay},
            displayTime: 'fast'
        },
        optionsAudio: {
            size: {
                    width: '100px',
                    height: '100px',
                    cssClass: 'jp-jplayer'
                  }
        },

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

@brian
10 years ago
10,148 posts

You might try just editing the jrAudio/css/jrAudio_player_dark.css file and add your CSS there instead. I've not tried it, but it might work for you.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

MAD
@madc
10 years ago
600 posts

Yeah i tried it with absolute and relative but it is actually inside the div so it overlays the player.
Tried to move it but I can't responsively
What I want is to have the player say down 100px and have the album cover and the info displayed at the top of the player.
Doesn't seem to want to work with CSS alone. Something must be overriding it.
I had to use absolute ( which is useless in this scenario ) a z-index and !important which I hate using
Not even a specific override would work

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

updated by @madc: 03/14/14 11:36:59AM

@michael
10 years ago
7,715 posts

Make sure you are using the correct naming convention.

The playlist player is different than the jrAudio modules player.

Brian gave the correct steps to override the jrAudio modules player

brian:
What you want to do is "override" the player template - i.e. of you want override the Audio dark player, which is this template:

modules/jrAudio/templates/jrAudio_player_dark.tpl

You would create a file in your active skin directory:

skins/SkinName/jrAudio_jrAudio_player_dark.tpl

and you'll see at the top the JS section you can modify to suit your needs.

I'm not sure why we never set this in our players, but can check it out.

Hope this helps!

The same applies to the playlist player, but it would be:
modules/jrPlaylist/templates/jrPlaylist_player_dark.tpl
to
skins/SkinName/templates/jrPlaylist_jrPlaylist_player_dark.tpl

put something in so you know your override is working "IS THIS BEING OVER-RIDDEN....????"

MAD
@madc
10 years ago
600 posts

Yeah thank @michael. I tried all that and put in HELLO and it was overriding.
I refer to this as this user got them in a popup
https://www.jamroom.net/the-jamroom-network/forum/design-and-skin-customization/4380/jplayer-playlist-and-track-images

But I have no idea where to stick the code at the top of the file to make the image show above the player.
I tried lots of different variations but none worked.

As I said I can get them to show by a CSS override but it is only overriding the position of the JS.
Even jplayer say you need to add the option.
( which to me is dumb as that should be by default and it should be an easy edit to remove it if you don't want it )

It shows if I adjust the JS file but that will just break in future updates.

The template doesn't have any option to show the info for each song.
So it needs to be added, but the problem is, I think, that the js is getting called after the template override.
So it negates the edit.

So I'm stuck. This should be an easy add.
If it were a jplayer site which I built I would just edit the JS file.

So any other thoughts?

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

Anyway to override jquery.jplayer.min.js?

Tags