JQuery Media problem identifying content class

Posted by rpk on August 25, 2009 at 3:44pm

Hi,

I'm having a problem with JQuery Media. I have mp3 links show up as expected with a Flash player interface. However, since I'm NOT using filefield for identifying the mp3s as JQuery Media targeted files, I set 'Classes' in JQuery Media to 'a' (link) in order to play linked mp3 files via the JQuery Media module.

The result in my case is that when using Clean URLs and giving pages a URL, the navigational links to those pages now show a preview of the linked page in a small white box. Clearly the JQuery Media module previews the linked page, just like it would PDF files etc.

It seems I need to assign a content class to the mp3 files to distinguish them from any other links on any given web page, but I have no idea how to do that with filefield, which I don't want to use for various reasons.

If anyone could help I would appreciate it!

Thanks,
RPK

Comments

class="media"

Posted by Daniel J Wilcox... on August 25, 2009 at 5:06pm

Let me see if i have this right

You have set the classes in jquery media to use the a tag to embed media

The a tag is used for adding links

<a href="http://drupal.org">This is a link to drupal.org</a>

So its trying to convert all normal links into embedded media elements

The class that is recommend is .media

So you should add .media as the css class in Jquery media

Then you would use this code like this

<a class="media" href="http://myserver.com/some_music.mp3">Some music</a>

Heres the documentation

http://malsup.com/jquery/media/

Hope that solves your problem

Hi Daniel, Thanks for your

Posted by rpk on August 25, 2009 at 6:09pm

Hi Daniel,

Thanks for your help!

Yes, your description is pretty much what's going on, though not every link is affected. In fact, most links continue to work as they should and the mp3 links become embedded media objects.

Generally, since this site will be maintained by non-coder types (and I myself am only mediocre at best myself), I need to implement mp3 integration without the need for any additional code for every new file that's being added.

In that regard, I managed to have JQuery play back the mp3 files nicely when it was set to apply to all links. The navigation of the site and any other links, such as email links etc. in other regions of the site where not affected. However, once I added URL paths to a page to convert a node/xx path to a simpler path, those page links in the navigation where then picked up by JQuery as embedded media elements.

Is there a way to automatically assign a class to the mp3 files without the need to hand code each link whenever a new mp3 gets added to the site? For my site it would be ideal, if JQuery would simply identify files by their file extension.

Thanks,
RPK

2 solutions that use less code

Posted by Daniel J Wilcox... on August 25, 2009 at 11:38pm

Hi Mate

Yes it can be a pain to get non techie type to add code

Not all users have ninja like html skills, so you need to make it easy as possible for your users

So here are 2 other options you could use that are a bit more noob friendly

1 - Use the filefield module and jquery media

File field cck module ( you need the cck module installed as well )

http://drupal.org/project/filefield

Heres a screencast on how to set it up

http://www.drupaltherapy.com/filefield

2 - Use the Embedded Media Field module

http://drupal.org/project/emfield

Just put a link in to an mp3 and it embeds the mp3 for you in a flash player

For instance on a blog you would have a title, body and another text field where you add a link to an mp3
you just put a link in to where the mp3 is stored on your server

The code you add would look like this

http://myserver.com/some_music.mp3

Then the mp3 is displayed in a flash player

Option 1 allows you to upload a file to your site and automatically embed it

Option 2 lets you link to a file that has been uploaded to another server

There are lots of good screencast on blip.tv you might find helpful

http://blip.tv/

Just do a search on Drupal on blip.tv and you find lots of useful info

Hope that solves your problem

Dan

Hi Dan, The filefield

Posted by rpk on August 26, 2009 at 3:10pm

Hi Dan,

The filefield solution worked but isn't quite right for what I need to accomplish. But the Embedded Media Field looks very promising!

Thanks for pointing that module out to me!

RPK